11-小结
12.8 小结
在本章中,我们讨论了如何将服务器端渲染功能构建到应用中。正如我们看到的,它可能涉及应用的很多方面,包括路由、数据获取和状态管理(Redux)。
- 服务器端渲染(SSR)是在服务器上为发送到客户端的UI生成静态标记。使用React的SSR涉及使用React-DOM渲染React在客户端运行时可以复用的HTML字符串(
ReactDOM.renderToString())或者使用React-DOM渲染在浏览器上保持静态的静态标记(ReactDOM.renderToStaticMarkUp())。 - 并不是所有的JS框架和库都被构建用于处理SSR,但React是,它可以“接管”在服务器上生成的标记而无须在浏览器上重新渲染已有元素。
- 使用像React Router这样的路由解决方案可以让开发者在客户端和服务器之间共享路由,以及跨平台共享一些代码。
- SSR的实现可能非常复杂并且只在某些情况下才有意义。这些情况包括:当特别关注SEO时,当应用程序的关键路径需要较短的白屏时间时,或是当使用React作为静态标记生成器时。
- 通常只有在服务器发送的页面有效负载不太大时,SSR所能提供的性能收益才会实现(这样就不会比之前花费更长时间加载)。更长的响应时间和更多的数据可能消除原本可以实现的较短的白屏时间。
- SSR要求开发者考虑应用的哪些部分会在服务器上运行而哪些部分不会。那些需要浏览器环境的特性需要经过修补才能在服务器上工作,或者应该对这些特性进行处理以便不让它们在服务器上运行。
- 通过同步客户端和服务器之间的身份验证状态以及在服务器上做必要的数据获取工作来实现服务器上的“完整”渲染。
- 尽管有其他的JS平台实现,但SSR实际上要求运行一个Node.js服务器,或者至少调用一个Node.js服务器来生成HTML发送给客户端。
在下一章中,我们将简要地看看React Native,并结束我们学习React基础知识的旅程。
[1] 虽然作者在原文将perceptual speed index和speed index认定为一种指标,但实际上这是两种指标,其统计方式并不相同。前者采用了 Structural Similarity Image Metric 算法,后者则采用了 Mean Pixel-Histogram Difference 算法,其中 Perceptual Speed Index 的统计结果更贴近用户的真实感受。——译者注