软件技术学习笔记

去年的时候，为了提升用户首屏显示时间，我们使用React SSR。但是，前段时间用户访问量比较大，发现用户导航之后首屏很久才出来。查看链路追踪，发现后端接口的响应时间远大于平常。

SSR的目的是为了让用户更快地看到内容，但是后端接口超时就白屏很久。为了解决这个问题，在SSR请求后端接口时，也启动一个超时Promise。如果超时先返回，立刻给用户返回CSR HTML模板，确保用户尽快能够看得界面。还没有数据的Loading界面，总比一直白屏好。

前端客户端渲染（CSR）时，一般都进行代码拆分，按需懒加载页面相关的JS/CSS与数据，交互体验比较好且容易开发。但是只进行CSR时，首屏显示比较缓慢。服务端渲染（SSR）时，一次请求能拿到页面完整的HTML内容，我们用来解决首屏显示缓慢的问题。同时使用CSR与SSR，就面临如何复用所有的代码，包含CSR代码拆分。

在React/Preact中，SSR复用CSR代码拆分有两种实现：@loadable/component与preact-cli 。@loadable/component中使用NodeJS的require()动态加载JS文件，而preact-cli则直接静态打包到一个JS文件中。

单页面应用(SPA)在处理大数据与强交互的方面有优势，但是其缺点是首屏加载比较慢、很难进行搜索引擎优化(SEO)。在工具软件上，选择SPA是正确的。但是，以静态内容展现为主的网站，如果选择SPA，给用户的体验不好。前端使用React框架时，可以选择服务端渲染(SSR)的方式解决该问题。

大部分网站，即使是以静态内容展现为主的网站，其中也包含一部分动态内容与交互。本文就演示：使用React服务端渲染的同时，也在前端动态渲染一些组件（为了让只搞过SPA的同学更容易理解，暂时称之为“SPA片段”），目的是完成动静分离、页面骨架快速显示。同时，“SPA片段”这种方法，可以用来逐渐替换“祖传”的老代码到React组件。导出静态路由之后，还可以使用SSR来生成页面缓存或静态页面。