react服务端渲染 + pwa 调研

[shaozj]

react服务端渲染 + pwa 调研

为什么要调研 react 服务端渲染和 pwa

本质上都是为了提升 h5 应用的性能。react 服务端渲染能提升首屏渲染的性能以及提供 SEO 的优化。pwa 利用其 service workers 可以做很多事情，如消息推送、添加首屏以及最重要的离线缓存功能。

为什么用、什么时候用 react 服务端渲染

react 服务端渲染能带来性能提升（首屏渲染）以及 SEO 优化。带来这些好处的同时，也会带来一些额外的开销。一是应用编写会带来一些额外的复杂度，二是服务端渲染会带来额外的服务端计算开销。
在考虑是否需要 react 服务端渲染时，我们需要综合考虑性能和代价。对于性能要求很高的面向 c 端的应用，应该考虑使用 react 服务端渲染。同时，为了不使服务器端有过高的计算压力，节省服务端资源，需要采取各种方法优化服务端渲染的性能。例如采用缓存，首屏部分内容服务端渲染，其他内容懒加载等技术。

技术方案

参考阿里 node 现有的方案，我们可以考虑采用 egg + react + webpack 的方案。

• 服务端开发 egg
  egg 是阿里 node 工作组研发的 node 服务端开发框架，已经有较为完整的生态以及集团内大量的实践。采用 egg 能让我们有一个坚实的基础。
• react 代码编译 webpack
  服务端渲染本质上是将我们编写的 react 应用在服务端直接渲染为 HTML 字符串。因为我们编写的 react 应用是基于 jsx 和 es2015+ 的，这样的代码在服务端是无法直接运行的，它需要经过 webpack 编译后才能在服务端运行。所以 webpack 对于服务端渲染是必不可少的。同时，webpack 服务端渲染和客户端渲染需要的配置是不同的，这需要我们编写不同的服务端渲染和客户端渲染 webpack 配置。
• 开发体验，自动热更新
  如果我们每次修改前端 react 代码后都需要编译一次代码，然后重启服务器调试，那么对于开发来说，这样的开发体验是极其糟糕的。我们所希望的是如同纯前端开发般每次修改代码后能自动热更新，在浏览器上能自动看到最新的效果，而不需要手动重新编译以及重启服务器。这是我们需要解决的一个点，也是做服务端渲染时相对较难的一个点。
• 缓存机制-pwa
  利用 pwa，我们可以做页面资源的缓存，在一些场景下大大提升页面的体验。同时能提供离线使用功能。

现有框架

• beidou
  阿里集团内基于 egg 的 react 服务端渲染框架
• egg-view-react
  同样基于 egg，支持 react 服务端渲染
• react-starter-kit
  基于 express 的 react 服务端渲染框架
• next.js
  很强大的 react 服务端渲染框架

性能对比

从 The Performance Cost of Server Side Rendered React on Node.js 这篇文章我们可以看到，react 服务端渲染的性能还是较弱的，原因是基于 virtual-dom 的模板引擎相对基于字符串的模板引擎，其复杂度一定是相对较高的。但是我们也能看到，最近 react 服务端渲染的性能在不断提升，基本已经和 Nunjucks 模板差不多了。

当前存在问题

如果要推进 react 服务端渲染以及 pwa，现在缺乏可以实践的场景。这样的话只能在技术学习中去推进。而实际场景和我们在学习研究中的场景存在不同，同时学习研究中如果没有实际问题场景，那么会面临很多选择却不知到底该如何抉择的问题。也就是到底要解决什么问题不明确的话，行动就会变得很盲目。例如，要实现 react 服务端渲染平台，支持活动页服务端渲染和做服务端渲染框架，支持 h5 app 服务端渲染，要解决的问题是很不一样的。