详解基于React.js和Node.js的SSR实现方案
基础概念
SSR：即服务端渲染(Server Side Render) 传统的服务端渲染可以使用Java，php 等开发语言来实现，随着 Node.js 和相关前端领域技术的不断进步，前端同学也可以基于此完成独立的服务端渲染。
过程：浏览器发送请求 -> 服务器运行 react代码生成页面 -> 服务器返回页面 -> 浏览器下载HTML文档 -> 页面准备就绪 即：当前页面的内容是服务器生成好给到浏览器的。
对应CSR：即客户端渲染(Client Side Render) 过程：浏览器发送请求 -> 服务器返回空白 HTML(HTML里包含一个root节点和js文件) -> 浏览器下载js文件 -> 浏览器运行react代码 -> 页面准备就绪 即：当前页面的内容是js渲染出来
如何区分页面是否服务端渲染： 右键点击 -> 显示网页源代码，如果页面上的内容在HTML文档里，是服务端渲染，否则就是客户端渲染。
对比
- CSR：首屏渲染时间长，react代码运行在浏览器，消耗的是浏览器的性能
- SSR：首屏渲染时间短，react代码运行在服务器，消耗的是服务器的性能
为什么要用服务端渲染
首屏加载时间优化，由于SSR是直接返回生成好内容的HTML，而普通的CSR是先返回空白的HTML，再由浏览器动态加载JavaScript脚本并渲染好后页面才有内容；所以SSR首屏加载更快、减少白屏的时间、用户体验更好。
SEO (搜索引擎优化)，搜索关键词的时候排名，对大多数搜索引擎，不识别JavaScript 内容，只识别 HTML 内容。 （注：原则上可以不用服务端渲染时最好不用，所以如果只有 SEO 要求，可以用预渲染等技术去替代）
构建一个服务端渲染的项目
(1) 使用 Node.js 作为服务端和客户端的中间层，承担 proxy代理，处理cookie等操作。
(2) hydrate 的使用：在有服务端渲染情况下，使用hydrate代替render，它的作用主要是将相关的事件注水进HTML页面中(即：让React组件的数据随着HTML文档一起传递给浏览器网页)，这样可以保持服务端数据和浏览器端一致，避免闪屏，使第一次加载体验更高效流畅。
ReactDom.hydrate(<App />, document.getElementById('root'));
(3) 服务端代码webpack编译：通常会建一个webpack.server.js文件，除了常规的参数配置外，还需要设置target参数为'node'。
const serverConfig = {
target: 'node',
entry: './src/server/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist')
},
externals: [nodeExternals()],
module: {
rules: [{
test: /\.js?$/,
loader: 'babel-loader',
exclude: [
path.join(__dirname, './node_modules')
]
}
...
]
}
(此处省略样式打包，代码压缩，运行坏境配置等等...)
...
};
(4) 使用react-dom/server下的 renderToString方法在服务器上把各种复杂的组件和代码转化成 HTML 字符串返回到浏览器，并在初始请求时发送标记以加快页面加载速度，并允许搜索引擎抓取页面以实现SEO目的。
const render = (store, routes, req, context) => {
const content = renderToString((
<Provider store={store}>
<StaticRouter location={req.path} context={context}>
<div>
{renderRoutes(routes)}
</div>
</StaticRouter>
</Provider>
));
return `
<html>
<head>
<title>ssr</title>
</head>
<body>
<div id='root'>${content}</div>
<script src='/index.js'></script>
</body>
</html>
`;
}
app.get('*', function (req, res) {
...
const html = render(store, routes, req, context);
res.send(html);
});
与renderToString类似功能的还有： i. renderToStaticMarkup：区别在于renderToStaticMarkup 渲染出的是不带data-reactid的纯HTML，在JavaScript加载完成后因为不认识之前服务端渲染的内容导致重新渲染(可能页面会闪一下)。
ii. renderToNodeStream：将React元素渲染为其初始HTML，返回一个输出HTML字符串的可读流。
iii. renderToStaticNodeStream：与renderToNodeStream此类似，除了这不会创建React在内部使用的额外DOM属性，例如data-reactroot。
(5) 使用redux 承担数据准备，状态维护的职责，通常搭配react-redux, redux-thunk(中间件：发异步请求用到action)使用。（本猿目前使用比较多是就是Redux和Mobx，这里以Redux为例）。 A. 创建store(服务器每次请求都要创建一次，客户端只创建一次):
const reducer = combineReducers({
home: homeReducer,
page1: page1Reducer,
page2: page2Reducer
});
export const getStore = (req) => {
return createStore(reducer, applyMiddleware(thunk.withExtraArgument(serverAxios(req))));
}
export const getClientStore = () => {
return createStore(reducer, window.STATE_FROM_SERVER, applyMiddleware(thunk.withExtraArgument(clientAxios)));
}
B. action: 负责把数据从应用传到store，是store数据的唯一来源
export const getData = () => {
return (dispatch, getState, axiosInstance) => {
return axiosInstance.get('interfaceUrl/xxx')
.then((res) => {
dispatch({
type: 'HOME_LIST',
list: res.list
})
});
}
}
C. reducer：接收旧的state和action，返回新的state，响应actions并发送到store。
export default (state = { list: [] }, action) => {
switch(action.type) {
case 'HOME_LIST':
return {
...state,
list: action.list
}
default:
return state;
}
}
export default (state = { list: [] }, action) => {
switch(action.type) {
case 'HOME_LIST':
return {
...state,
list: action.list
}
default:
return state;
}
}
D. 使用react-redux的connect，Provider把组件和store连接起来
Provider 将之前创建的store作为prop传给Provider
const content = renderToString((
<Provider store={store}>
<StaticRouter location={req.path} context={context}>
<div>
{renderRoutes(routes)}
</div>
</StaticRouter>
</Provider>
));
connect([mapStateToProps]，[mapDispatchToProps]，[mergeProps]， [options])接收四个参数 常用的是前两个属性 mapStateToProps函数允许我们将store中的数据作为props绑定到组件上mapDispatchToProps将action作为props绑定到组件上
connect(mapStateToProps(),mapDispatchToProps())(MyComponent)
(6) 使用react-router承担路由职责 服务端路由不同于客户端，它是无状态的。React 提供了一个无状态的组件StaticRouter，向StaticRouter传递当前URL，调用ReactDOMServer.renderToString() 就能匹配到路由视图。
服务端
import { StaticRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config'
import routes from './router.js'
<StaticRouter location={req.path} context={{context}}>
{renderRoutes(routes)}
</StaticRouter>
浏览器端
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config'
import routes from './router.js'
<BrowserRouter>
{renderRoutes(routes)}
</BrowserRouter>
当浏览器的地址栏发生变化的时候，前端会去匹配路由视图，同时由于req.path发生变化，服务端匹配到路由视图，这样保持了前后端路由视图的一致，在页面刷新时，仍然可以正常显示当前视图。如果只有浏览器端路由，而且是采用BrowserRouter，当页面地址发生变化后去刷新页面时，由于没有对应的HTML，会导致页面找不到，但是加了服务端路由后，刷新发生时服务端会返回一个完整的html给客户端，页面仍然正常显示。 推荐使用 react-router-config插件，然后如上代码在StaticRouter和BrowserRouter标签的子元素里加renderRoutes(routes)：建一个router.js文件
const routes = [{ component: Root,
routes: [
{ path: '/',
exact: true,
component: Home,
loadData: Home.loadData
},
{ path: '/child/:id',
component: Child,
loadData: Child.loadData
routes: [
path: '/child/:id/grand-child',
component: GrandChild,
loadData: GrandChild.loadData
]
}
]
}];
在浏览器端请求一个地址的时候，server.js 里在实际渲染前可以通过matchRouters 这种方式确定要渲染的内容，调用loaderData函数进行action派发，返回promise->promiseAll->renderToString，最终生成HTML文档返回。
import { matchRoutes } from 'react-router-config'
const loadBranchData = (location) => {
const branch = matchRoutes(routes, location.pathname)
const promises = branch.map(({ route, match }) => {
return route.loadData
? route.loadData(match)
: Promise.resolve(null)
})
return Promise.all(promises)
}
(7) 写组件注意代码同构(即：一套React代码在服务端执行一次，在客户端再执行一次) 由于服务器端绑定事件是无效的，所以服务器返回的只有页面样式(&注水的数据)，同时返回JavaScript文件，在浏览器上下载并执行JavaScript时才能把事件绑上，而我们希望这个过程只需编写一次代码，这个时候就会用到同构，服务端渲染出样式，在客户端执行时绑上事件。
优点： 共用前端代码，节省开发时间 弊端： 由于服务器端和浏览器环境差异，会带来一些问题，如document等对象找不到，DOM计算报错，前端渲染和服务端渲染内容不一致等；前端可以做非常复杂的请求合并和延迟处理，但为了同构，所有这些请求都在预先拿到结果才会渲染。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Node.js之readline模块的使用详解
什么是readline readline允许从可读流中以逐行的方式读取数据,比如process.stdin等. 在node.js命令行模式下默认引入了readline模块,但如果是使用node.js运行脚本的话,则需要自己通过require('readline')方式手动引入该模块. 怎么使用readline 创建实例 首先.创建一个接口实例,提供一个Object类型的参数.参数如下: input: 监听的可读流(必需) output: 写入readline的可写流(必需) completer:
-
Node.js动手撸一个静态资源服务器的方法
简介 本文介绍了一个简单的静态资源服务器的实例项目,希望能给Node.js初学者带来帮助.项目涉及到http.fs.url.path.zlib.process.child_process等模块,涵盖大量常用api:还包括了基于http协议的缓存策略选取.gzip压缩优化等:最终我们会发布到npm上,做成一个可以全局安装.使用的小工具.麻雀虽小,五脏俱全,一想是不是还有点小激动?话不多说,放码过来. 文中源码地址在最后附录中. 可先行体验项目效果: 安装:npm i -g here11 任意文件夹
-
Node.js + express实现上传大文件的方法分析【图片、文本文件】
本文实例讲述了Node.js + express实现上传大文件的方法.分享给大家供大家参考,具体如下: 对于大文件的上传我们首先要引入一个叫做 multer 的库: npm install --save multer 关于这个库,大家可以查阅官方文档: 点击跳转 https://www.npmjs.com/package/multer 我们先将库引入我们的项目中: var multer = require('multer') var upload = multer({ dest: 'upload
-
Node.js Event Loop各阶段讲解
Event Loop阶段描述图 timers timer阶段处理setTimeout于setInterval回调,开始处理的时机与poll阶段有关联. pending callbacks 该阶段执行某些系统操作的回调,比如TCP套接字在连接时收到ECONNREFUSED. 网上有一些将该阶段称为I/O callbacks的文章都是过时错误的,具体可以移步Node.js官方库下面的这个issue: #1118. idle, prepare 内部使用,忽略. poll poll是一个核心阶段,等新I
-
node.js实现微信开发之获取用户授权
本篇主要讲述,如何在微信中打开自家页面后,弹窗请求用户授权,以便拿到用户的微信信息. 首先说一下,完成自定义分享信息的,从无到有的流程: 基础硬件服务: 需要一个公网可以访问的有效域名: 购买域名,并备案,我是在阿里云购买的,备案需要十几个工作日. 购买ip,然后设置上面的域名,解析到该ip,这个时间可以快到忽略. 拥有自己的服务器,来存放自己页面项目: 我还是在阿里云购买购买服务器,这个花费最大,几百元一年的使用权. 而且这个服务器,本质就是一台电脑,是电脑就有配置,我目前只是自己学习使用,配
-
Node.js使用supervisor进行开发中调试的方法
如果你有 PHP 开发经验,会习惯在修改 PHP 脚本直接刷新浏览器以查看结果,而你 在开发 Node.js 实现的 HTTP 应用时会发现,无论你修改了代码的哪一个部分,都必须终止Node.js然后重新运行. 这是因为 Node.js 只有在第一次引用到某一部分时才会去解析 本文件,以后都会直接访问内存,避免重复载入,而 PHP 则是重新读取并解析脚本(如果没有专门的优化配置). 在开发Node.js实现HTTP应用时会发现,无论你修改了代码的哪一部分,都必须终止Node.js再重新运行才会奏
-
使用Node.js实现一个多人游戏服务器引擎
摘要 听说过文字冒险游戏吗? 如果你的年龄足够大的话(就像我一样),那么你可能听说过.甚至玩过"back in the day".在本文中,我将向你展示编写的整个过程.这不仅仅是一个文本冒险游戏,而是一个能让你和你的朋友们一起玩的,可以进行任何剧情的文本冒险游戏引擎. 没错,我们将通过在添加多人游戏功能来增加它的趣味性. 文字冒险是最早的 RPG 形式的游戏之一,回到还没有图形画面的时代,你只能通过阅读 CRT 显示器上黑色背景下的描述,并且依赖自己的想象力来推动游戏剧情的发展. 如果
-
零基础之Node.js搭建API服务器的详解
零基础之Node.js搭建API服务器 这篇文章写给那些Node.js零基础,但希望自己动手实现服务器API的前端开发者,尝试帮大家打开一扇门. HTTP服务器实现原理 HTTP服务器之所以能提供前端使用的API,其实现原理是服务器保持监听计算机的某个端口(通常是80),等待客户端请求,当请求到达并经过一系列处理后,服务器发送响应数据给到前端. 平时大家通过Ajax调用API,即是发起一次请求,经过服务器处理后,得到结果,然后再进行前端处理.如今使用高级编程语言,要实现服务器那部分功能已经变得非
-
Node.js Stream ondata触发时机与顺序的探索
上次写Stream pipe细节时,在源码中发现一段无用逻辑,由此引发了对Stream data事件触发时机与顺序的探索. 无用逻辑 当时研究pipe细节是基于Node.js v8.11.1的源码,其中针对上游的ondata事件处理有如下一段代码: // If the user pushes more data while we're writing to dest then we'll end up // in ondata again. However, we only want to in
-
Node.js + express基本用法教程
本文实例讲述了Node.js + express基本用法.分享给大家供大家参考,具体如下: 这里来讲下 express 框架的使用,编译的环境是 VS Code ,这里我已经配饰了阿里的镜像,所有 npm 指令用 cnpm 代替 首先学会向 Node.js 种引入 express 非常建党只需两步,输入指令: cnpm init 然后就可以载入 express cnpm install express -save 到此为止 express 救成功导入了 这里介绍一个技巧: 输入: cnpm in