从简单React SSR项目透视服务端渲染原理

原文发布于咱们前端团队的公众号，建议读者进入公众号看原文，CSDN的排版和配色太难受了，作为一个前端不能忍

一、为什么要进行服务端渲染

随着前端技术栈和工具链的迭代成熟，前端工程化、模块化的趋势也愈发明显，在这波前端技术浪潮中，涌现了诸如React、Vue、Angular等基于客户端渲染的前端框架，这类框架所构建的单页应用（SPA）具有渲染性能好、可维护性高等优点。但也同时带来了两个缺陷：

1.首屏加载时间过长

2.不利于SEO

与传统web项目直接获取服务器端渲染好的HTML不同，单页应用使用JavaScript在客户端生成HTML来呈现内容，用户需要等待JS解析执行完成才能看到页面，这就使得首屏加载时间变长，影响用户体验。此外当搜索引擎爬取网站HTML文件时，单页应用的HTML没有内容，从而影响搜索排名。为了解决这两个缺陷，业界借鉴传统的服务器端直出HTML方案，提出在服务器端执行前端框架(React/Vue/Angular)代码生成HTML，然后将渲染好的HTML返回给客户端，实现CSR前端框架的服务器端渲染。

本文通过一个简单的demo，向读者讲解React服务器端渲染（SSR）的基本原理，在阅读完本文后，读者应该能够掌握：

服务器端渲染的基本概念和原理
在SSR项目中渲染组件
在SSR项目中使用路由
在SSR项目中使用redux

二、在SSR项目中渲染组件

1.使用node进行服务端渲染

我们使用express启动一个Node服务器来进行基本的服务端渲染。首先安装初始化node项目和安装express

npm init

npm install express –save

在根目录中创建文件app.js，监听3000端口的请求，当请求根目录时，返回一些HTML

const express = require('express')
const app = express()
app.get('/', (req,res) => res.send(`
<html><head><title>ssr demo</title></head><body>Hello world</body>
</html>
`))app.listen(3000, () => console.log('Exampleapp listening on port 3000!'))

进入项目根目录，运行node app.js启动项目。

鼠标右键查看网页源代码，这就是服务器端直接返回的HTML，我们已经完成了一个基本的服务端渲染。如果我们打开一个react项目并查看网页源代码，会发现代码中并没有页面内容对应的HTML，这是因为react所构建的SPA单页应用是通过在客户端执行JS动态地生成HTML，初始的HTML文件中并没有对应的内容。

2.在服务器端编写React代码

我们已经启动了一个Node服务器，下一步我们需要在服务器上编写React代码,我们创建一段这样的React代码并在app.js进行引用

import React from 'react'const Home = () =>{return <div>home</div>}export default Home

然而这段代码并不会运行成功，因为直接在服务器端运行React代码是行不通的，原因有以下几个：

Node不能识别import和export，这二者属于esModule的语法，而Node遵循common.js规范
Node不能识别JSX语法，我们需要使用webpack对项目进行打包转换，使之成为Node能识别的语法

为了使代码能够运行，我们需要安装webpack并进行配置

npm install webpack webpack-cli –save 安装webpack和webpack-cli
根目录下创建配置文件webpack.server.js并进行相关配置

const path = require('path')    //node的path模块
const nodeExternals = require('webpack-node-externals')module.exports = {target:'node',mode:'development',           //开发模式entry:'./app.js',             //入口output: {                     //打包出口filename:'bundle.js',     //打包后的文件名path:path.resolve(__dirname,'build')    //存放到根目录的build文件夹},externals: [nodeExternals()],  //保持node中require的引用方式module: {rules: [{                  //打包规则test:   /\.js?$/,       //对所有js文件进行打包loader:'babel-loader',  //使用babel-loader进行打包exclude: /node_modules/,//不打包node_modules中的js文件options: {presets: ['react','stage-0',['env', { //loader时额外的打包规则,对react,JSX，ES6进行转换targets: {browsers: ['last 2versions']   //对主流浏览器最近两个版本进行兼容}}]]}}]}
}

3.安装对应的babel

npm install babel-loaderbabel-core –save

npm install babel-preset-react –save

npm install babel-preset-stage-0 –save

npm install babel-preset-env –save

npm install webpack-node-externals –save

4.运行webpack --config webpack.server.js

5.启动打包后的文件node ./build/bundle.js

关于webpack的使用，比较陌生的读者可以参考我们公众号这篇：《webpack入门》

https://mp.weixin.qq.com/s/qtw3nKLyo-fSrs8cZ9_zHw

3.使用renderToString渲染组件

经过webpack对JSX和ES6进行打包转化后，我们还是无法正确运行我们的代码，以前在客户端渲染DOM时，我们使用下面的代码，但这段代码无法在服务端运行。

import Home from './src/containers/Home'import ReactDom from 'react-dom'ReactDom.render(<Home/>, document.getElementById('root')) //服务端没有DOM

我们需要使用react-dom提供的renderToString方法，将组件渲染成为字符串再插入返回给客户端的HTML中

import express from 'express'
import React from 'react'//引入React以支持JSX的语法
import { renderToString } from 'react-dom/server'//引入renderToString方法
import Home from'./src/containers/Home'const app= express()
const content = renderToString(<Home/>)
app.get('/',(req,res) => res.send(`
<html><head><title>ssr demo</title></head><body>${content}</body>
</html>
`))app.listen(3001, () => console.log('Exampleapp listening on port 3001!'))

重新打包并重启服务器，我们就能在页面上看到服务器端渲染的组件

4.webpack自动打包和服务端自动重启

写到这里我们对之前的Node和webpack的启动方式做一个小优化，在这之前，我们每次对项目的改动，都需要重新执行webpack--config webpack.server.js和node ./build/bundle.js来重启项目，现在我们对package.json文件中的script做一些改动，使得服务器能够自动重启和打包

在webpack --config webpack.server.js后加上—watch就能实现webpack的自动监听打包，当需要被打包的文件发生变化时，webpack就会自动重新打包
安装nodemon，nodemon是nodemonitor的缩写，nodemon能够帮我们监听文件的变化并自动重启服务器，我们需要运行 npm install nodemon –g安装nodemon，在package.json的script配置项中添加这两句：

 "scripts":{"dev": "nodemon--watch build --exec node \"./build/bundle.js\"","build": "webpack--config webpack.server.js --watch"},

在进行了以上两条配置后，我们开启两个终端，分别运行npm run dev和npm run build就能完成项目的自动打包和服务器重启

3.安装npm-run-all进一步简化流程：

运行npm install npm-run-all –g安装npm-run-all，并对package.json进行配置

"scripts": {"dev": "npm-run-all--parallel dev:**","dev:start": "nodemon--watch build --exec node \"./build/bundle.js\"","dev:build": "webpack--config webpack.server.js --watch"},

我们在原来的start和build加上dev前缀，表示这是开发环境所使用的命令，在线上环境时我们并不需要执行这两条命令去监听。配置好以后，运行npm run dev，我们就完成了自动打包和服务端启动重启，每次对代码的更改只需要刷新页面就能看到效果，不必像原来那样手动重新打包和重启服务器

5.同构的概念

我们在上面的过程中，已经将组件渲染到了页面上，下面我们为组件绑定一个点击事件。

import React from 'react'const Home= () =>{return (<div><div>home</div><button onClick={()=>{alert('click')}}>click</button></div>)
}export default Home

运行代码，刷新页面，我们会发现并没有执行对应的点击事件，这是由于renderToString只渲染了组件的内容，而不会绑定事件，为了能够给页面上的组件绑定事件，我们需要将React代码在服务端执行一遍，在客户端再执行一遍，这种服务器端和客户端共用一套代码的方式就称之为同构。

我们通过<script>标签为页面引入客户端执行的React代码，并通过express的static中间件为js文件配置路由，修改原来的app.js

import express from 'express'
import React from 'react'//引入React以支持JSX的语法
import { renderToString } from'react-dom/server'//引入renderToString方法
import Home from './src/containers/Home'const app = express()
app.use(express.static('public'));
//使用express提供的static中间件,中间件会将所有静态文件的路由指向public文件夹const content = renderToString(<Home/>)app.get('/',(req,res)=>res.send(`
<html><head><title>ssr demo</title></head><body>${content}<script src="/index.js"></script></body>
</html>
`))app.listen(3001, () =>console.log('Example app listening on port 3001!'))

然后我们需要编写我们的index.js（客户端的React代码），我们尝试在public文件夹下创建index.js并编写React代码，但这些React代码将无法运行，因为我们同样需要使用webpack对客户端的React进行打包。

5.在客户端执行React代码

我们先调整一下目录结构，在src文件夹下新建client文件夹用来存放客户端代码，根目录下新建webpack.client.js作为客户端React代码的webpack配置文件，public文件夹将用来存放webpack打包后的客户端代码；新建server文件夹用来存放服务器端代码，将原来app.js的内容移至server文件夹下的index.js，并修改webpack.server.js的入口。新建containers文件夹存放React代码

下面我们开始编写客户端webpack配置项，在webpack.client.js中编写以下代码：


const path = require('path')                    //node的path模块module.exports = {mode:'development',                         //开发模式entry:'./src/client/index.js',              //入口output: {                                   //打包出口filename:'index.js',                    //打包后的文件名path:path.resolve(__dirname,'public')   //存放到根目录的build文件夹},module: {rules: [{                               //打包规则test:   /\.js?$/,                    //对所有js文件进行打包loader:'babel-loader',               //使用babel-loader进行打包exclude: /node_modules/,             //不打包node_modules中的js文件options: {presets: ['react','stage-0',['env', {     //loader时额外的打包规则,这里对react,JSX进行转换targets: {browsers: ['last 2versions']   //对主流浏览器最近两个版本进行兼容}}]]}}]}
}

同时我们对package.json中的script部分进行修改

 "scripts": {"dev": "npm-run-all--parallel dev:**","dev:start": "nodemon--watch build --exec node \"./build/bundle.js\"","dev:build:server": "webpack--config webpack.server.js --watch","dev:build:client": "webpack--config webpack.client.js --watch"},

重新运行npm run dev，我们就完成了服务端、客户端代码的自动打包，刷新页面，可以看到事件已经成功绑定

这里报了个警告，原因是在React 16中进行服务端渲染时，应该将render()方法替换为hydrate()方法，虽然在React16中仍然能够使用render()渲染HTML，但为了消除错误，最好替换成hydrate()

有关hydrate的更多内容，可以看这个讨论：https://www.wengbi.com/thread_50584_1.html

6.webpack优化整理

我们在项目中编写了两个webpack配置文件，其实在这两个配置文件当中存在很多共同的部分，我们应该将共同的部分提取出来，减少代码的冗余性。我们安装webpack-merge模块来帮助我们提取公用的webpack配置项。

新建webpack.base.js文件，将webpack.server.js和webpack.client.js中共同的配置项移到这里并通过module.exports进行导出

module.exports = {module: {rules: [{test:   /\.js?$/,loader:'babel-loader',exclude: /node_modules/,options: {presets: ['react','stage-0',['env', {targets: {browsers: ['last 2versions']}}]]}}]}
}

2.在webpack.server.js和webpack.client.js中通过merge方法将公用配置项和当前配置项进行合并导出。

//webpack.client.js配置
const path = require('path')
const merge = require('webpack-merge')
const config = require('./webpack.base.js')const clientConfig = {mode:'development',entry:'./src/client/index.js',output: {filename:'index.js',path:path.resolve(__dirname,'public')},
}module.exports = merge(config,clientConfig)

//webpack.server.js配置
const path = require('path')
const nodeExternals = require('webpack-node-externals')
const merge = require('webpack-merge')
const config = require('./webpack.base.js')const serverConfig = {target:'node',mode:'development',entry:'./app.js',output: {filename:'bundle.js',path:path.resolve(__dirname,'build')},externals: [nodeExternals()],
}module.exports = merge(config,serverConfig)

段落小结：

本小节介绍了如何在服务端进行基础的组件的渲染和事件绑定，通过本小节的讲解，读者应该能够体会到React SSR的基本思路——同构，所谓同构，就是一套React代码在服务器端执行生成HTML，客户端再执行代码接管页面的操作，从而使得页面兼具SSR和CSR的优点。

总结一下服务端渲染组件的步骤：

建立一个node项目
编写服务器端的React代码并使用webpack进行打包编译，使用renderToString方法将组件渲染成为HTML。
编写客户端需要执行的React代码，并使用webpack进行打包编译，通过script标签引入页面，接管页面的操作。

三、在SSR项目中使用路由

1.在客户端使用路由

同样的，在使用路由时，我们需要在服务器端和客户端各配置一遍路由，原因会在下文中解释。我们首先进行客户端的路由配置，安装react-router。

npm install react-router-dom —save

然后我们在src文件夹下创建Router.js存放路由条目

import React from 'react'                   //引入React以支持JSX
import { Route } from 'react-router-dom'    //引入路由
import Home from './containers/Home'        //引入Home组件export default (<div><Route path="/" exact component={Home}></Route></div>
)

修改client文件夹下的index.js，使用BrowserRouter并引入路由条目

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter } from'react-router-dom'
import Router from'../Routers'const App= () => {return (<BrowserRouter>{Router}</BrowserRouter>)
}ReactDom.hydrate(<App/>, document.getElementById('root'))

运行代码，刷新页面，会发现控制台报错：

这是由于我们在Router.js使用路由时，外层需要套一个div，然而服务器端的HTML外层并没有这个div，导致了客户端渲染的页面和服务端渲染的页面内容不同，因而报错，所以我们需要在服务器端再配置一次路由，使得服务器端和客户端渲染的内容一致（当然，如果直接在服务器返回的HTML里加多一个div是可以暂时解决这个报错的，但在服务器端不写路由的话，在接下来的步骤中还会遇到其他错误）

2.在服务器端使用路由

修改server文件夹下的index.js，在这里引入服务器端路由。在服务器端我们需要使用StaticRouter来替代BrowserRouter，StaticRouter 是 React-Router 针对服务器端渲染专门提供的一个路由组件，由于StaticRouter不能像BrowserRouter一样感知页面当前页面的url，所以我们需要给StaticRouter传入location={当前页面url}，另外使用 StaticRouter时必须传递一个context参数，用于服务端渲染时的参数传递。

import express from 'express'
import React from 'react'//引入React以支持JSX的语法
import { renderToString } from 'react-dom/server'//引入renderToString方法
import { StaticRouter } from 'react-router-dom'
import Router from '../Routers'const app = express()
app.use(express.static('public'));
//使用express提供的static中间件,中间件会将所有静态文件的路由指向public文件夹app.get('/',(req,res)=>{const content  = renderToString((//在服务端我们需要使用StaticRouter来替代BrowserRouter//传入当前path//context为必填参数,用于服务端渲染参数传递<StaticRouter location={req.path} context={{}}>{Router}</StaticRouter>))res.send(`<html><head><title>ssr demo</title></head><body><div id="root">${content}</div><script src="/index.js"></script></body></html>`)
})app.listen(3001, () => console.log('Exampleapp listening on port 3001!'))

这时再打开我们的页面，就不会出现错误了。

3.通过link实现多页面跳转

我们创建一个Login组件

并在Routers.js中为login组件添加路由

import React from'react'                   //引入React以支持JSX
import { Route } from'react-router-dom'    //引入路由
import Home from'./containers/Home'        //引入Home组件
import Login from'./containers/Login'      //引入Login组件exportdefault (<div><Route path="/" exact component={Home}></Route><Route path="/login" exact component={Login}></Route></div>
)

另外我们需要将src/server/index.js中的路由从匹配‘/’改成‘*’，否则当我们访问http://localhost:3001/login时将由于匹配不到路由而提示404错误。

import express from 'express'
import React from 'react'//引入React以支持JSX的语法
import { renderToString } from 'react-dom/server'//引入renderToString方法
import { StaticRouter } from 'react-router-dom'
import Router from '../Routers'const app= express()
app.use(express.static('public'));
//使用express提供的static中间件,中间件会将所有静态文件的路由指向public文件夹app.get('*',(req,res)=>{const content  = renderToString((<StaticRouter location={req.path} context={{}}>{Router}</StaticRouter>))res.send(`<html><head><title>ssr demo</title></head><body><div id="root">${content}</div><script src="/index.js"></script></body></html>`)
})app.listen(3001, () =>console.log('Exampleapp listening on port 3001!'))

我们可以稍微抽离以上代码中生成HTML的部分，server文件夹下新建utils.js文件，存放生成HTML的代码

import React from 'react'//引入React以支持JSX的语法
import { renderToString } from 'react-dom/server'//引入renderToString方法
import { StaticRouter } from 'react-router-dom'
import Router from '../Routers'export const render = (req) => {const content = renderToString((<StaticRouter location={req.path} context={{}}>{Router}</StaticRouter>));return`<html><head><title>ssr demo</title></head><body><div id="root">${content}</div><script src="/index.js"></script></body></html>`
}

原来的server/index.js可以改成以下形式

import express from 'express'
import { render } from './utils'const app = express()
app.use(express.static('public'));
//使用express提供的static中间件,中间件会将所有静态文件的路由指向public文件夹app.get('*',(req,res)=>{res.send(render(req))
})app.listen(3001, () => console.log('Exampleapp listening on port 3001!'))

在进行了以上的步骤后，我们使用Link标签来实现一个导航功能，我们需要创建一个导航栏组件并在home和login中引用这个导航栏组件，对于可以复用的组件，我们在src文件夹下创建component文件夹存放公共组件，并在component下创建header.js作为我们的导航栏组件

import React from 'react'
import { Link } from 'react-router-dom'const Header = () => {return (<div><Link to='/'>Home </Link><Link to='/login'>Login</Link></div>)
}export default Header

然后我们分别在Home组件和Login组件中引用这个导航栏组件，保存代码，刷新页面，现在已经能够在页面上进行路由跳转了。

值得注意的是，只有在第一次进入页面时，浏览器请求了页面文件，之后切换路由的操作都不会重新请求页面，因为这时页面的路由跳转已经是客户端React的路由跳转了。

段落小结：

本小节介绍了如何在SSR项目中使用路由，我们需要在服务器端和客户端各配置路由才能正常实现页面跳转，对于配置两次路由的原因，笔者的理解是

1.服务端路由是为了第一次进入页面时能够找到对应的网页文件

2.客户端路由是为了能让React路由接管页面实现无刷新跳转

3.如果服务器端不写路由的话，会导致页面内容不统一而出现报错

此外我们需要注意到，只有在第一次进入页面的时候，浏览器才会使用服务器端路由请求网页文件，当页面渲染后，React的客户端路由将接管页面路由，实现无刷新跳转。

四、在SSR项目中使用redux

本小节将讲解如何在SSR项目中使用redux，这是项目中的一个难点，同样的我们需要在客户端和服务器端各执行一次redux的代码，原因会在下文中解释。

1.安装redux以及redux中间件

npm install redux –save

npm install react-redux–save

npm install redux-thunk–save

2.在客户端使用redux

接下来我们进行一系列常规操作，这里不再细讲redux、redux-thunk、react-redux的使用。我们在客户端代码（/client/index.js）里使用redux创建store和reducer，配置中间件thunk，并将store传递给组件。

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import Routers from '../Routers'
import { createStore,applyMiddleware } from 'react'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'const reducer = (state,action) => {return state
}const store = createStore(reducer,applyMiddleware(thunk))const App = () => {return (<Provider store={store}><BrowserRouter>{Routers}</BrowserRouter></Provider>)
}ReactDom.hydrate(<App/>,document.getElementById('root'))

在子组件（Home）中我们使用react-redux中的connect方法与store进行连接

import React from 'react'
import Header from '../../component/header'
import { connect } from 'react-redux'const Home= () =>{return (<div><Header/><div>{props.name}</div><button onClick={()=>{alert('click')}}>click</button></div>)
}const mapStateToProps = state => ({name:state.name
})export default connect(mapStateToProps,null)(Home)

在写完客户端的redux代码后，我们可以刷新页面看看效果

可以看到页面上会报错，这是由于在访问http://localhost:3001/时，首先会进入server文件夹下的index.js，index.js会去渲染Home组件，当Home组件去调用store里的数据时，由于此时还没有执行客户端的redux代码，导致Home组件找不到store而报错，因此我们需要在服务器端代码（server/until.js）里也创建一次store，并通过react-redux传递给组件

3. 在服务器端使用redux

同样的，我们在服务器端的代码中也引入Redux

import React from 'react'//引入React以支持JSX的语法
import { renderToString } from 'react-dom/server'//引入renderToString方法
import { StaticRouter } from 'react-router-dom'
import Router from  '../Routers'
import { createStore,applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'export const render = (req) => {const reducer = (state = { name:'CJW' },action) => {return state}const store= createStore(reducer,applyMiddleware(thunk))const content = renderToString((<Provider store={store}><StaticRouter location={req.path} context={{}}>{Router}</StaticRouter></Provider>));return`<html><head><title>ssr demo</title></head><body><div id="root">${content}</div><script src="/index.js"></script></body></html>`
}

然而在服务端这么写store是有坑的，createStore创建的store是单例的store，在服务器端这样的写法将导致所有用户共享一个store，所以我们将创建store这一步封装成一个方法，每次调用都返回一个新的store。此外我们可以将这部分创建store的代码抽离出来，在server和client分别引用，减少代码的冗余。

我们在src目录下创建一个store文件夹，store文件夹下创建index.js存放创建store的代码

import { createStore,applyMiddleware } from'redux'
import thunk from 'redux-thunk'const reducer = (state = { name:'CJW' }, action) => {return state
}const getStore = () => {return createStore(reducer,applyMiddleware(thunk))
}export default getStore

在client/index.js和server/utils.js中都引入getStore方法，删除原来创建store的代码

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import Routers from '../Routers'
import getStore from '../store'const App = () => {return (<Provider store={getStore()}><BrowserRouter>{Routers}</BrowserRouter></Provider>)
}ReactDom.hydrate(<App/>,document.getElementById('root'))

这里只是展示了一个简单的store创建，在实际使用中，我们需要创建一个规范的store，实现reducer、store和action的分离，但这里作为一个简单的demo就不进行这些操作了。

4. 异步请求数据

我们安装axios来方便我们的异步请求

npm install axios --save

由于已经安装了thunk，因此我们可以在action中发送异步请求，这一块也是thunk的基础内容，不做过多的讲解。修改Home文件夹下的index.js，代码如下（我这个axios请求的接口会返回一个列表，读者可以请求自己项目中的接口或请求各种公开的api）

（在这粘贴了半天都是灰色的。。。CSDN这个编辑器咋回事）

import React from 'react'
import Header from '../../component/header'
import { connect } from 'react-redux'
import axios from 'axios'class Home extends React.Component {//在componentDidMount中发送异步请求componentDidMount(){this.props.getList()}render(){console.log(this.props.list)return (<div><Header/>{  this.props.list?<div>{this.props.list.map(item=>(<div>{item.title}</div>))}</div>:''}<button onClick={()=>{alert('click')}}>click</button></div>)}
}//使用redux-thunk,在action中写axios并dispatch
const getData = () => {return (dispatch) => {//接收来自mapDispatchToProps的dispatch方法axios.get('http://异步请求的接口).then((res)=>{const list = res.data.datadispatch({type:'CHANGE_LIST',list:list})})}
}const mapStateToProps = state => ({name:state.name,list:state.list
})const mapDispatchToProps = dispatch => ({getList(){//调用dispatch时会自动执行getData里return的方法dispatch(getData())}
})export default connect(mapStateToProps , mapDispatchToProps)(Home)

折腾了半天，我们保存代码，刷新页面，可以看到页面上成功显示了异步请求的内容，然而我们右键检查网页源代码，却发现并没有对应内容的HTML，这是由于服务器端执行React代码时，并不会触发componentDidMount()，因此服务器端的store始终是空的

7.使用loadData填充数据

为了使得返回客户端的HTML包含异步请求的数据，实际上我们需要根据不同的页面，给当前的store填充数据，为了实现这个目的，我们需要满足以下两个条件：

1.服务器端代码在进入某个页面时能匹配到对应组件里的axios请求

2.被匹配的组件能将axios请求得到数据传递给服务器端的store

对于这个问题，React-Router已经为SSR提供了一些方法（参考官方文档：https://reacttraining.com/react-router/web/guides/server-rendering），我们需要进行以下几个步骤：

修改路由条目（Router.js）从导出组件改为导出数组

import Home from './containers/Home'        //引入Home组件
import Login from './containers/Login'      //引入Login组件export default [{path:'/',component:Home,         //渲染Home组件exact:true,             //严格匹配loadData:Home.loadData, //传入loadData方法key:'Home'              //用于后续循坏时提供key},{path:'/login',component:Login,        exact:true,            key:'login' }
]

2. 分别修改server和client文件夹下的util.js和index.js

import React from 'react'//引入React以支持JSX的语法
import { renderToString } from 'react-dom/server'//引入renderToString方法
import { StaticRouter,Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import routers from '../Routers'
import getStore from '../store'export const render = (req) => {const store= getStore()const content = renderToString((<Provider store={store}><StaticRouter location={req.path} context={{}}><div>{routers.map(router=> (<Route{...router}/>))}</div></StaticRouter></Provider>));return`<html><head><title>ssr demo</title></head><body><div id="root">${content}</div><script src="/index.js"></script></body></html>`
}

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter,Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import routers from '../Routers'
import getStore from '../store'const App = () => {return (<Provider store={getStore()}><BrowserRouter><div>{routers.map(router=> (<Route{...router}/>))}</div></BrowserRouter></Provider>)
}ReactDom.hydrate(<App/>,document.getElementById('root'))

3.在server/index.js引入matchPath方法匹配当前页面路由，并执行对应的loadData方法

import React from 'react'//引入React以支持JSX的语法
import { renderToString } from 'react-dom/server'//引入renderToString方法
import { StaticRouter,Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import routers from '../Routers'
import getStore from '../store'export const render = (req) => {const matchRoutes = []routers.some(route=> {matchPath(req.path, route) ? matchRoutes.push(route) : ''})console.log(matchRoutes)const store = getStore()const content = renderToString((<Provider store={store}><StaticRouter location={req.path} context={{}}><div>{routers.map(router=> (<Route{...router}/>))}</div></StaticRouter></Provider>));return`<html><head><title>ssr demo</title></head><body><div id="root">${content}</div><script src="/index.js"></script></body></html>`
}

这三步需要结合着看，在这一步骤，我们的目的是进入某个组件时，执行组件的loadData方法（方法将在下文实现），loadData方法将获取axios请求得到的数据，并将数据传递给服务器端的store。

我们可以打印一下匹配到的路由项，路由项的内容就是我们在Router.js中配置的路由条目。

下面我们来进行loadData方法的实现

import React from 'react'
import Header from '../../component/header'
import { connect } from 'react-redux'
import axios from 'axios'class Home extends React.Component {//在componentDidMount中发送异步请求componentDidMount(){this.props.getList()}render(){console.log(this.props.list)return (<div><Header/>{  this.props.list?<div>{this.props.list.map(item=>(<div>{item.title}</div>))}</div>:''}<button onClick={()=>{alert('click')}}>click</button></div>)}
}Home.loadData = (store) => {store.dispatch(getData())
} //使用redux-thunk,在action中写axios并dispatch
const getData = () => {return (dispatch) => {//接收来自mapDispatchToProps的dispatch方法axios.get('接口地址').then((res)=>{const list = res.data.datadispatch({type:'CHANGE_LIST',list:list})})}
} const mapStateToProps = state => ({name:state.name,list:state.list
}) const mapDispatchToProps = dispatch => ({getList(){//调用dispatch时会自动执行getData里return的方法dispatch(getData())}
})export default connect(mapStateToProps , mapDispatchToProps)(Home)

在loadData方法中，我们直接接收服务器端的store，调用store的dispatch方法来更新store的数据，但是光是这么写，我们还是会得到空的内容。这是因为axios请求是异步操作，服务器端渲染已经先于请求执行了，这里我们借助promise来修正我们的执行顺序，由于axios本身是一个promise对象，我们可以return axios对象，在loadData方法中，将dispatch也return出去，这样我们就能在server/util.js中得到这个promise，并调用Promise.all方法，让所有异步操作执行完后再渲染HTML，修改server/util.js，完成我们的最后一步

import React from 'react'//引入React以支持JSX的语法
import { renderToString } from 'react-dom/server'//引入renderToString方法
import { StaticRouter,Route,matchPath } from 'react-router-dom'
import { Provider } from 'react-redux'
import routers from '../Routers'
import getStore from '../store'export const render = (req,res) => {//将res传入以使用res.send()方法const store = getStore()const matchRoutes = []const promises = []routers.some(route=> {matchPath(req.path, route) ? matchRoutes.push(route) : ''})matchRoutes.forEach( item=> {promises.push(item.loadData(store))})Promise.all(promises).then(()=>{//可以console一下看到当前的store已经有数据console.log(store.getState())const content = renderToString((<Provider store={store}><StaticRouter location={req.path} context={{}}><div>{routers.map(router=> (<Route{...router}/>))}</div></StaticRouter></Provider>));res.send(`<html><head><title>ssrdemo</title></head><body><div id="root">${content}</div><script src="/index.js"></script></body></html>`)})
}

代码写到这，我们总算能够在服务器端正确地使用redux，在踩了无数坑之后，我们终于能够搭建一个基本的SSR项目了。有关服务器端渲染的讲解，到这里也就告一段落了

段落小结：

本小节介绍了如何在SSR项目中使用Redux并使用axios异步获取数据，和组件渲染、路由使用一样，我们需要在服务器端和客户端各使用一次Redux，其原因在于服务器端渲染只会走一遍生命周期，并且在第一次render后便会停止。异步数据请求放在componentDidMount函数中不会被触发，即使我们提前发起数据请求，由于是异步返回，得到的数据也无法再次触发render，所以返回给客户端的HTML依然没有异步请求的数据。对于这种情况，我们通过改造路由，使得每次进入对应页面时能够匹配对应的loadData方法，为服务器端的store注入数据，并将生成HTML的步骤放在异步请求完成之后。

五、结尾语

通过本文的介绍，读者应该对React服务端渲染有了初步的认识，能够在服务器端进行基本的组件渲染、路由跳转和使用redux，对webpack和Node在React项目中所起的作用也有了更进一步的了解。对于SSR的取舍，业界存在很多讨论，虽然SSR能够解决传统SPA项目首屏加载时间过长和不利于SEO的缺陷，但SSR同样带来了服务器负担重，实施难度大等诸多问题。如果对首屏加载时间和SEO没有极致的追求，我们可以选择更轻便的方案，如利用webpack和react-router分割代码，减少首屏加载时间；利用prerender进行预渲染，优化项目搜索引擎排名，不一定需要对整个项目采用同构的方式进行服务器端渲染。也许目前为止同构SSR并不是一种完美的方案，但在广大前端技术人员对性能和体验永不止步的追求中，有关SSR的讨论和迭代还将长久地持续下去。

参考文章:

《前后端渲染和同构渲染》：https://blog.csdn.net/qizhiqq/article/details/70904799

《Vue-SSR指南》：https://ssr.vuejs.org/zh/#

《next.js 的服务端渲染机制》：https://www.jianshu.com/p/a3bce57e7349

以上几篇文章对SSR的原理和优缺点进行了深入地剖析，帮助读者认识SSR的应用情景和使用局限。具有很高的参考价值

文章前后写了近3个月，希望能给大家带来帮助呀，本文总结自Dell Lee老师的React服务端渲染课程，Dell老师真的讲的很好，深入浅出，各个细节也有顾及。笔者在课程的基础上进行概括总结，并对课程中一些模糊的细节进行考据和思考，文章经过了公司前端团队评审，如果文章能够对大家有所启发，那真是太好了，希望大家多多支持Dell Lee老师的课程，毕竟光读一篇文章并不能完整掌握SSR。也希望读者能给咱公司前端团队的公众号点个关注，会定时推送技术分析噢

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

服务端渲染基础（25）
因大拉钩教育大前端一期学员已发布相同内容，所以这里只能为转载！ 这里也提一句：sb CSDN的原创审核机制！！！ 服务端渲染基础概述随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为…...
2024/5/7 3:56:32
服务端渲染看这一篇就够了（Next.js）
背景： 以前：没有服务端渲染的概念，大规模应用之前，用户请求网页，都是后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的 html 页面，再直接返回给浏…...
2024/4/21 4:38:14
Vue 服务端渲染(SSR)
一、什么是服务端渲染(SSR) Server Side Render简称SSR，服务端渲染。在ajax兴起之前，特别是在SPA（单页面应用（Single-Page Application））技术流行之前，大部分的web应用都采用的是服务端渲染。即…...
2024/4/28 1:34:27
React 服务端渲染最佳解决方案
最近在开发一个服务端渲染工具，通过一篇小文大致介绍下服务端渲染，和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思，根据你对服务端渲染的利弊权衡，你会选择哪一种服务端渲染方式呢？ 什么是服务器端渲染…...
2024/5/7 20:38:52
Angular 6 服务端渲染之 udao 终章
先介绍下小朋友 udao，首先是一个开源项目，代码足够简单，其次是跟随 Angular 大小版本一起成长的项目，会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了：github.com/OrangeXC/ud… 本来行文目的…...
2024/4/21 4:38:12
angular---路由传参数
...
2024/4/21 4:38:10
关于路由传参与接收参数
路由跳转传参的方式有很多，下面我总结一下常用的传参方式及其相对应的接收参数方式。第一，参数是以;分隔 http://localhost:8092/account/manage/issue;id161123434754052096 路由跳转方式： 1，routerLink的方式 <a [r…...
2024/4/20 19:45:53
Angular路由在标签里传参
（情景：点击news.component.html里的路由标签跳转到详情页(news-detail.component.html)，并把参数传过去）1.在app-routing.module.ts里配置路由: ............此处省略 const routes: Routes [// 刚进来为空的话就跳转到home路由…...
2024/4/20 12:37:55
angularjs的路由传参数方式
第一种: 参数会以?的形式出现在访问地址中?:userId会自动变为?userId0010001 $stateProvider.state(page.home, { url:"/home?:userId", templateUrl: "/html/homeView", controller: "homeController", title:"首页&quo…...
2024/4/20 19:45:51
Meteor 中文教程
Meteor 简介 Meteor是跨时代的全栈Web框架，Github stars数已超过Rails，它能迅速的开发实时（Real-Time）和响应式（Reactive）的应用，并且可以在一套代码中支持web，iOS，Andro…...
2024/4/20 19:45:49
为页面嵌入PDF文件—零基础自学网页制作
在页面中嵌入PDF文件今天我们来嵌入一个pdf文件。其实使用<iframe>标签也可以导入pdf标签，就是把pdf文件路径赋予src属性就可以了。示例代码如下： <body><iframe width"100%" height"900px" src"pdf/人工…...
2024/4/21 4:38:10
AngularJs 基础教程 —— 与php服务器
本文为 H5EDU机构官方 HTML5培训教程，主要介绍： AngularJs 基础教程—— PHP 简介PHP 是服务器端脚本语言。您应当具备的基础知识在继续学习之前，您需要对以下知识有基本的了解： HTML CSS 如果您希望首先学习这些项目&#xf…...
2024/4/25 2:35:58
记Angular与Django REST框架的一次合作（2）：前端组件化——Angular
注：这是这个系列的第二部分，主要集中在Angular的使用方面。之前使用过AngularJS（Angular 1.x），混在Django的模板中使用，这些页面一般完全是结果展示页。在有Django表单输入的页面中，就很难将两者…...
2024/4/27 8:45:28
入门ROS教程与视频汇总（kinetic）
参考网址： 1 MooreRobots 2 Richard Wang 3 Shawn Chen 部分视频网址： http://v.youku.com/v_show/id_XMjUxMTc5MzE5Mg http://i.youku.com/i/UMTg1NDE4MDM2/videos 注意下面是机器翻译结果~MooreRobots博客关于博客文章【概述】获得通过模拟在ROS…...
2024/5/8 18:35:54
一篇全面的zepplin教程
https://www.jianshu.com/p/090f02005e07 1.Zeppelin是什么? Apache Zeppelin是一款基于Web的Notebook(类似于jupyter notebook)，支持交互式地数据分析。 Zeppelin可实现你所需要的： 数据采集数据发现数据分析数据可视化和协作支持多种语言&#xff…...
2024/4/21 4:38:05
【资料】228页的《重学TS》PDF 终于来了，一份值得一读的 TS 学习资料
「《重学TS v1.0》」 PDF 是今年阿宝哥发布的第三本电子书，前两本分别是《前端进阶篇》（下载量 9500） 和《了不起的 TS 和 Deno》（下载量近 2060），这里衷心感谢大家对阿宝哥的认可与支持。在学习 TS 的过程…...
2024/4/21 4:38:05
html注释标签，完整PDF
前言 JavaScript是面向 Web 的编程语言，获得了所有网页浏览器的支持，是目前使用最广泛的脚本编程语言之一，也是网页设计和 Web 应用必须掌握的基本工具。 JavaScript主要用途嵌入动态文本与HTML页面对浏览器时间做出相应读写HTML元素在数…...
2024/4/21 4:38:03
webgoat全关教程手册
Webgoat&Webwolf owaspbwa里面的两个服务搭建先要安装jdk、Webgoat和Webwolf Webgoat和Webwolf jdk1.8不支持了，需要安装jdk11 去git上下载Webgoat和Webwolf https://github.com/WebGoat/WebGoat/releases/tag/v8.0.0.M26 去oracle官网下载JDK https:/…...
2024/5/8 15:08:42
web前端入门到实战：HTML 转 PDF 图文报表实践
导出 PDF 图文报表实践方法一： jsPDF 使用 jsPDF 时，需要注意的是其默认单位为 mm，需要在 new jsPDF() 时传入配置 const doc new jsPDF({unit: px,format: a4 })这个方法废了。这个鬼东西多行文本和多个图片，简直要人命&…...
2024/4/21 4:38:01
JavaTutorialNetwork 中文系列教程 · 翻译完成
原文：JavaTutorialNetwork 协议：CC BY-NC-SA 4.0 欢迎任何人参与和完善：一个人可以走的很快，但是一群人却可以走的更远。在线阅读ApacheCN 学习资源目录 JavaTutorialNetwork 中文系列教程Java 基础 Java 概述在 Ubuntu 上安装…...
2024/4/21 4:38:01

从简单React SSR项目透视服务端渲染原理

一、为什么要进行服务端渲染

二、在SSR项目中渲染组件

三、在SSR项目中使用路由

四、在SSR项目中使用redux

五、结尾语

相关文章

最新文章