React 服务端渲染完美的解决方案

Posted 2021-04-26 JSdig

好久没有更新，对不住那么多关注用户啊。

最近在开发一个服务端渲染工具，通过一篇小文大致介绍下服务端渲染，和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思，根据你对服务端渲染的利弊权衡，你会选择哪一种服务端渲染方式呢？

什么是服务器端渲染

使用 React 构建客户端应用程序，默认情况下，可以在浏览器中输出 React 组件，进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换成 html，直接在浏览器端“呈现”处理好的 HTML 字符串，这个过程可以被认为 “同构”，因为应用程序的大部分代码都可以在服务器和客户端上运行。

为什么使用服务器端渲染

与传统 SPA(Single Page Application - 单页应用程序)相比，服务器端渲染(SSR)的优势主要在于：

1. 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

2. 更好的用户体验，对于缓慢的网络情况或运行缓慢的设备，加载完资源浏览器直接呈现，无需等待所有的 javascript 都完成下载并执行，才显示服务器渲染的HTML。

服务端渲染的弊端

1. 由于服务端与浏览器客户端环境区别，选择一些开源库需要注意，部分库是无法在服务端执行，比如你有 document、window 等对象获取操作，都会在服务端就会报错，所以在选择的开源库要做甄别。

2. 使用服务端渲染，比如要起一个专门在服务端渲染的服务，与之前，只管客户端所需静态资源不同，你还需要 Node.js 服务端的和运维部署的知识，对你所需要掌握的知识点要求更多

3. 服务器需要更多的负载，在 Node.js 中完成渲染，由于 Node.js 的原因大量的CPU资源会被占用。

4. 下文介绍一种服务端渲染的“操作”，这个新的操作拥有新的问题，比如API请求两次，各种服务端问题，你就无能为力了，因为这个新的工具用Golang写的，你的团队或者是你，需要了解一下Golang，你说气不气人又要多学东西。

服务端渲染两种方式

根据上文介绍对服务端渲染利弊有所了解，我们可以根据利弊权衡取舍，最近在做服务端渲染的项目，找到多种服务端渲染解决方案，大致分为两类。

第一种方式

传统方式服务端渲染，解决用户体验和更好的 SEO，有诸多工具使用这种方式如React的(Next.js)、Vue的(Nuxt.js)等。

有些工具将 webpack 运行在服务端生产环境，实时编译，将编译结果缓存起来，这都还是传统的方式，只不过将 webpack 运行在服务端实时编译，还是开发环境编译预编译好的问题。

我选择了将 webpack 放在开发环境，只做开发打包的功能，打包 客户端 bundle ，服务端 bundle，资源映射文件 assets.json，CSS 等资源进行部署。

服务器 bundle 用于服务器端渲染(SSR)

客户端 bundle 给浏览器加载，浏览器通过 bundle 加载更多其它模块(chunk)js

资源映射文件 assets.json 则是，服务器 bundle 在准备所需 HTML，需要预插入那些模块(chunk)js，和CSS，这只是提高用户体验。

具体使用方法，可以看我最近造的个轮子 kkt-ssr，这个轮子将工具的部分封装起来，你只需要写业务代码，和少量的服务端渲染代码即可，还附赠十几个示例，加上一个相对比较完善的示例react-router+rematch，类似于 next.js，但是有相当大的区别。

kkt-ssr: https://github.com/jaywcjlove/kkt-ssr

第二种方式

这是一种创新的方法，前端单页面应用，以前怎么玩儿，现在还怎么玩儿，多的一步是，你得先访问一个Rendora的服务，在前面拦截是否需要服务端渲染。下图为官方图：

这种方式原本只是个想法，想法是前端不用管服务端渲染的事儿了，不就是解决SEO？，这些爬虫过来的时候，可以通过头信息判断，写个服务，然后将需要的内容给爬虫就可以了，昨天恰巧在GitHub的趋势榜上，恰巧看到 Rendora 个工具，也就那么巧，刚好思路一致，这个工具主要为网络爬虫提供零配置服务器端渲染，以便毫不费力地改进在现代Javascript框架（如React.js，Vue.js，Angular.js等）中开发的网站的SEO问题。

Rendora: https://github.com/rendora/rendora

这种方式非常好，之前写好的项目一句不用改，只需新起 Rendora 服务。对于来自前端服务器或外部的每个请求(百度谷歌爬虫)，Rendora会根据配置文件，根据头，路径来检测或过滤，以确定 Rendora 是否应该只传递从后端服务器返回的初始HTML或使用Chrome提供的无头服务器端呈现的HTML。更具体地说，对于每个请求，有2条路径：

1. 请求被列入白名单作为SSR的候选者(即过滤后的Get请求)，Rendora 会指示无头Chrome实例请求相应的页面，呈现它，并返回包含最终服务器端的响应呈现出HTML。通常只需要将百度、谷歌、必应爬虫等网络抓取工具列入白名单即可。

2. 未列入白名单(即请求不是GET请求或未通过任何过滤器)，Rendora将只是充当反向HTTP代理，只是按原样传送请求和响应。

Rendora可以看作是位于后端服务器（例如Node.js / Express.js，Python / Django等等）之间的反向HTTP代理服务器，也可能是你的前端代理服务器（例如nginx，traefik，apache等），

Rendora 是我见过的接近于完美的动态渲染器，提供零配置服务器端渲染

我们到底选择哪一种服务端渲染呢？

Rendora，新的方式非常厉害，有很多优势：

1. 方便迁移老的项目，前端和后端代码不需要更改。

2. 可能更快的性能，资源(CPU)消耗可能更少，Golang编写的二进制文件

3. 多种缓存策略

4. 已经拥有 docker 容器方案

此工具，服务端渲染的页面需要缓存，缓存引发的小问题就是

1. 通过缓存解决，性能问题和调用API两次的问题，服务端渲染，客户端展示渲染，平常调用一次API，现在调用了两次。

2. 被缓存的页面，不能及时清理，比如网站发现用户发了不良信息，需要清理，就需要清理缓存页面了。

3. 如果想提高用户体验，浏览器端一些页面需要服务端渲染，这个时候服务端需要请求API，就会有权限问题，或者直接从缓存里面读取的HTML，到浏览器客户端，可能会有服务端和浏览器端渲染不一致的错误。

如果上面两种方式不在你的考虑范畴之内，那Rendora将是你完美的服务端渲染解决方案

总结

感觉我的轮子 kkt-ssr 好像白写了一样，经过分析发现目前还有一点作用吧，至少解决了不多调用一次API，和API调用权限问题导致渲染不一致的问题。但是我更推荐Rendora的方式，这将是未来。

不管怎样，轮子还需要Star的。打开原文连接，来个 Star