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

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

1、服务器端渲染是什么? 使用 React 构建客户端应用程序，默认状况下，能够在浏览器中输出 React 组件，进行生成 DOM 和操做 DOM。React 也能够在服务端经过 Node.js 转换成 HTML，直接在浏览器端“呈现”处理好的 HTML 字符串，这个过程能够被认为 “同构”，由于应用程序的大部分代码均可以在服务器和客户端上运行。 2、为何使用服务器端渲染? 服务器端渲染(SSR)的优点主要在于： 更好的 SEO，因为搜索引擎爬虫抓取工具能够直接查看彻底渲染的页面。 更好的用户体验，对于缓慢的网络状况或运行缓慢的设备，加载完资源浏览器直接呈现，无需等待全部的 JavaScript 都完成下载并执行，才显示服务器渲染的HTML。 3、服务端渲染方式 方式一： 传统方式服务端渲染，解决用户体验和更好的 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，新的方式很是厉害，有不少优点： 1.方便迁移老的项目，前端和后端代码不须要更改； 2.可能更快的性能，资源(CPU)消耗可能更少，Golang编写的二进制文件； 3.多种缓存策略； 4.已经拥有 docker 容器方案。 最后我更推荐Rendora的方式，这将是将来。