摘要：三服务端渲染方式方式一传统方式服务端渲染，解决用户体验和更好的，有诸多工具使用这种方式如的的等。未列入白名单即请求不是请求或未通过任何过滤器，将只是充当反向代理，只是按原样传送请求和响应。
一、服务器端渲染是什么?
使用 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的方式，这将是未来。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54756.html
摘要：服务端渲染两种方式根据上文介绍对服务端渲染利弊有所了解，我们可以根据利弊权衡取舍，最近在做服务端渲染的项目，找到多种服务端渲染解决方案，大致分为两类。第一种方式传统方式服务端渲染，解决用户体验和更好的，有诸多工具使用这种方式如的的等。 最近在开发一个服务端渲染工具，通过一篇小文大致介绍下服务端渲染，和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思，根据你对服务端渲染的利弊权...
摘要：服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于已经提供代码热加载，使用预处理，单元测试，代码覆盖率报告，代码分割等等更多。 Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于webpack已经提供代码热加载，使用...
摘要：服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于已经提供代码热加载，使用预处理，单元测试，代码覆盖率报告，代码分割等等更多。 Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于webpack已经提供代码热加载，使用...
阅读 2552·2021-08-20 09:38
阅读 1335·2019-08-30 15:43
阅读 574·2019-08-29 17:13
阅读 1553·2019-08-29 14:01
阅读 1288·2019-08-29 13:29
阅读 2295·2019-08-23 18:29
阅读 2028·2019-08-23 17:51
阅读 1857·2019-08-23 17:16
