96 - 《Bigfish 4 特性 08：SSR & SSG》

4 月会更新 20 篇 Bigfish 4（含 Umi 4）的新特性，这是第八篇。

先解释下名词。SSR 是 Server Side Render（服务端渲染），即在服务端完成页面渲染，返回完整的 HTML 和 CSS，提升首屏渲染时间，同时解 SEO 爬虫抓不到内容的问题；SSG 是 Server Side Generation，基于 SSR 在构建阶段完成渲染，生成大部分页面对应的 HTML 文件，适用于既是静态无服务器又想拥有 SSR 优点的场景。

由于我们的业务属性原因，Bigfish 的 SSR 在内网应用场景相对少，大多集中在官网和组件文档方面。很多对 C 的项目，渲染性能和 SEO 是强需求。

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

数据方案迭代

先看数据加载策略。

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，适用不同的场景，其中前者是给 SSG 用的。

getServerSideProps 顾名思义，只在 server 端跑。那他如何解路由切换时的数据加载问题？答案是通过 API 请求。切换路由时，框