软件技术学习笔记

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

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

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

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