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

一、服务器端渲染是什么? 使用 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，新的方式非常厉害，有很多优势： 1.方便迁移老的项目，前端和后端代码不需要更改； 2.可能更快的性能，资源(CPU)消耗可能更少，Golang编写的二进制文件； 3.多种缓存策略； 4.已经拥有 docker 容器方案。最后我更推荐Rendora的方式，这将是未来。

转载于:https://juejin.im/post/5c9b06a9e51d450a9344b725

React 服务端渲染完美的解决方案相关推荐

手把手带你用next搭建一个完善的react服务端渲染项目（集成antd、redux、样式解决方案）
前言本文参考了慕课网jokcy老师的React16.8+Next.js+Koa2开发Github全栈项目,也算是做个笔记吧. 源码地址 github.com/sl1673495/n- 介绍 Next ...
React服务端渲染实现（基于Dva)
React服务端渲染实现 (基于Dva) 功能基于 Dva 的 SSR 解决方案 (react-router-v4, redux, redux-saga) 支持 Dynamic Import (不再 ...
美少女秃头思考：react服务端渲染
富婆来报道,今天想问题想不出来,随手抓了一下头发,没想到啊没想到,我那浓(mei)密(sheng)茂(ji)盛(gen)的秀发又少了好几根,一定要改掉这个想不出来问题就揪头发的坏习惯.你们遇到问题想不 ...
用 TypeScript 编写一个 React 服务端渲染库（1）
前言代码都甩在 Github 上面了,欢迎随手 star ? 踩坑的过程大概都在 TypeScript + Webpack + Koa 搭建 React 服务端渲染这篇文章里面踩坑的 DEMO ...
ssr Android简书,react服务端渲染ssr
Next.js 一个轻量级的 React 服务端渲染框架 1 概念 SPA single page application : 单页面应用程序缺点:首屏加载慢,不利于SEO SSR Server-s ...
React服务端渲染（SSR）入门及项目搭建
代码已经关联到github: 链接地址文章有更新也会优先在这,觉得不错可以顺手点个star,这里会持续分享自己的开发经验(: 前言服务端渲染是什么?我们什么情况下需要使用它?想要了解这些,需要简单 ...
React 服务端渲染 umi服务端渲染
react 服务端渲染原理不复杂,其中最核心的内容就是同构. node server 接收客户端请求,得到当前的req url path,然后在已有的路由表内查找到对应的组件,拿到需要请求的数据,将数 ...
一个较复杂的React服务端渲染示例(React-Koa-Redux等)
好久没写博客了~前段时间一直在忙着一个项目上线,最近终于完事了~有一段清闲,正好研究研究React的服务端渲染: 其实React服务端渲染就是用Node.js的v8引擎,在Node端执行JS代码,把R ...
React 服务端渲染方案完美的解决方案
最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务 ...
我很懒,什么都没留下系列之教你上手React服务端渲染（React SSR） HMR
技术栈:webpack3.9.1+webpack-dev-server2.9.5+React16.x + express4.x 前言 (好慌!可能是因为我很懒,导致...,然后,好吧,我比较懒,没有然 ...

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

React 服务端渲染完美的解决方案相关推荐

最新文章

热门文章