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

前端  /  管理员 发布于 6年前   196

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

二、为什么使用服务器端渲染?服务器端渲染(SSR)的优势主要在于：
更好的 seo，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
更好的用户体验，对于缓慢的网络情况或运行缓慢的设备，加载完资源浏览器直接呈现，无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的HTML。

三、服务端渲染方式方式一：
传统方式服务端渲染，解决用户体验和更好的 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，这只是提高用户体验。

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

​​
这种方式原本只是个想法，想法是前端不用管服务端渲染的事儿了，不就是解决SEO？，这些爬虫过来的时候，可以通过头信息判断，写个服务，然后将需要的内容给爬虫就可以了。
这种方式非常好，之前写好的项目一句不用改，只需新起 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，新的方式非常厉害，有很多优势：

方便迁移老的项目，前端和后端代码不需要更改；可能更快的性能，资源(CPU)消耗可能更少，Golang编写的二进制文件；多种缓存策略；已经拥有 docker 容器方案。

最后我更推荐Rendora的方式，这将是未来。