81 - 《SSR 数据方案的迭代和 Umi 4》

Umi 4 的 SSR 进行中，和同事讨论后，做下整理。

1、

SSR 不止是 ReactDOM.renderToString() + ReactDOM.hydrate()，还有 server 产物的 bundle、SSG、数据加载策略、路由文件的拆分、CSR & SSR 的选择和混用、assets 资源的处理、逻辑复用、HTML 拼接、路由和数据的加载及隐射关系、组件如何获取数据、潜在内存问题的处理等。

2、

SSR 的加载策略已今时不同往日。加载策略要考虑不同的时机，1）页面初始加载时 2）页面切换时 3）build（即 SSG）时。不同时机的环境是不同的，初始加载时和 SSG 时肯定发生在 node 侧，而页面切换时用 node 侧还是 browser 侧是可以选择的。

Next.js 最早用的是 getInitialProps，getInitialProps 在页面加载时会在 node（server）侧执行，而在页面切换时会在 browser 侧执行。Umi 3 实现参考了这种实现。这种方式的问题是，node 和 browser 能拿到的入参是不同的，比如 node 下拿到 request 和 response，访问 database 等，这个方法如果要设计成既在 node 跑又在 browser 跑，那能做的事的边界就小了，比如只能做做 fetch 之类的。

Page.getInitialProps = async (ctx) => {
 return { data: await fetch('/url') };
};

大家如果有看 Next.js 的文档，会发现他已不推荐使用 getInitialProps，而是推荐用 getStaticProps 和 getServerSideProps，适用不同的场景，其中前者