- 在前面的文章中，我已经对服务端渲染有了充分介绍，并且实现了最简单的服务端渲染。
- 在这篇文章中，就基于React，一步一步来搭建一个服务端渲染的项目。
这里是github地址 react-ssr，欢迎start
第一步：React组件渲染
1. 目标
首先，我们将下面这个简单的React组件渲染出来。
在前面的文章中已经渲染出简单的HTML结构，现在需要在页面上渲染出React组件。
// 在页面上渲染出该home组件
const Home = () => {
return (
<div>
<div>Hello World</div>
</div>
)
}
- 你可能会想，直接把React组件引入不就可以了吗？就像这样：
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import Home from '../containers/Home';
const app = express();
const content = ReactDOMServer.renderToString(<Home />); // 引入了组件Home
app.get('/', function(req, res) {
res.send(
`
<html>
<head>
<title>ssr</title>
</head>
<body>
<div id="root">${content}</div>
</body>
</html>
`
)
})
app.listen(8000, () => {
console.log('listen:8000')
})
- 但是，上面的代码直接执行会失败
- 首先是
es6语法，如果比较高的版本的node在package.json中配置就可以了。如果是比较低版本的就不行了。
// 报错信息，无法识别 es mudule
SyntaxError: Cannot use import statement outside a module
- 还有
JSX需要结合babel使用@babel/preset-react进行转换
// 报错信息，无法识别JSX语法
SyntaxError: Unexpected token '<'
所以在正式开始之前，需要将项目进行配置一下
2. 下载依赖
首先需要安装项目所需依赖
express
yarn add express // 用于启动服务
webpack
yarn add -D webpack webpack-cli webpack-dev-server webpack-merge webpack-node-externals
bable
yarn add -D @babel/cli @babel/core @babel/preset-env @babel/preset-react @babel/preset-stage-0 babel-loader @babel/runtime
react
yarn add react react-dom
命令
yarn add -D npm-run-all // 简化命令
yarn add -D nodemon // 监听变化，自动执行JS文件
注意：可以参考我项目中的依赖版本。
3.项目配置
- 我们这里开发的Home组件是不能直接在node中运行的，需要借助
webpack工具将jsx语法打包编译成js语法，让nodejs可以争取的识别，我们需要创建一个webpack.server.js文件。
// webpack.server.js
const Path = require('path');
const NodeExternals = require('webpack-node-externals'); // 服务端运行webpack需要运行NodeExternals, 他的作用是将express这类node模块不被打包到js里。
module.exports = {
target: 'node',
mode: 'development',
entry: './src/server/index.js',
output: {
filename: 'bundle.js',
path: Path.resolve(__dirname, 'build')
},
externals: [NodeExternals()],
module: {
rules: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['react', 'stage-0', ['env', {
targets: {
browsers: ['last 2 versions']
}
}]]
}
}
]
}
}
4. 编写基于express服务
需要安装react-dom，借助renderToString将Home组件转换为标签字符串
// src/server/index.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import Home from '../containers/Home';
const app = express();
const content = ReactDOMServer.renderToString(<Home />);
app.get('/', function(req, res) {
res.send(
`
<html>
<head>
<title>ssr</title>
</head>
<body>
<div id="root">${content}</div>
</body>
</html>
`
)
})
app.listen(8000, () => {
console.log('listen:8000')
})
// containers/Home/index.js
import React from 'react';
const Home = () => {
return (
<div>
<div>Hello World</div>
</div>
)
}
export default Home
5. 启动服务
想要访问到页面，我们需要打包产生bundle.js文件，执行该文件就能启动express服务，我们就能通过浏览器窗口的地址栏输入localhost:8000访问到了。
但是在项目进行的过程中，可能需要多次修改，这里我们就需要相应配置从而简化一下。
- 自动打包：通过
--watch监听文件变化进行自动打包。 - 运行JS文件：借助
nodemon模块，监听build文件并且发生改变之后重新exec运行node ./build/bundile.js - 执行所有命令：创建一个dev命令, 里面执行
npm-run-all, --parallel表示并行执行, 执行dev:开头的所有命令。
配置如下：
"scripts": {
"dev": "npm-run-all --parallel dev:**",
"dev:build:server": "webpack --config webpack.server.js --watch",
"dev:start": "nodemon --watch build --exec node \"./build/bundle.js\""
},
这个时候我想启动服务器同时监听文件改变运行yarn dev就可以了。出现下面内容说明启动成功，在浏览器中可以看到页面内容。
6. 小结
- React组件服务端渲染需要使用
renderToString方法，将React组件渲染为字符串。并注入到需要发送到客户端的HTML中。
第二步：同构
1. 事件绑定
- 前面我们实现了最基本的SSR服务端渲染的流程，但是通过
renderToString方法将React组件渲染为字符串。 - 因为只是字符串，所以并不能进行交互。也就是说一系列的事件绑定都没有应用上去。
接下来我们就来学习事件的绑定。
(1)做法
SSR有两套代码，一套在服务端运行一次，一套在客户端运行一次。- 首先浏览器向服务器发送请求，服务器返回一个空的html。
- 浏览器再请求并加载JS。
- 执行JS代码接管页面执行流程，这个时候就可以触发点击事件了。
客户端获取到的页面结构如下：
(2)同构代码
浏览器后续请求的JS就是同构代码。这里我们同构代码使用hydrate代替render。
// src/client/index.js
import React from 'react';
import ReactDom from 'react-dom';
import Home from '../containers/Home';
ReactDom.hydrate( < Home / > , document.getElementById('root'))
原组件中增加点击事件
// containers/Home/index.js 添加点击事件
import React from 'react';
const Home = () => {
return <div onClick={() => { alert('click'); }}>home</div>
}
export default Home
在服务端生成的html中引入JS，
// ./src/server/index.js 在输出的内容中引入JS文件
app.get('/', function(req, res) {
res.send(
`
<html>
<head>
<title>Palate-ssr</title>
</head>
<body>
<div id="root">${content}</div>
<script src="/index.js"></script>
</body>
</html>
`
)
})
(3)配置webpack
同构代码也需要先对React语法进行编译
// webpack.client.js
const path = require('path')
const { merge } = require('webpack-merge')
const config = require('./webpack.base') // 公共部分
const clientConfig = {
mode: 'development',
entry: './src/client/index.js',
module: {
rules: [{
test: /\.css?$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: true
}
}]
}]
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'public')
},
}
module.exports = merge(config, clientConfig)
抽离和webpack.server.js文件的公共部分，使用webpack-merge插件对内容进行合并。
// webpack.base.js
module.exports = {
module: {
rules: [{
test: /\.jsx?$/,
exclude: '/node_modules/',
loader: 'babel-loader',
options: {
presets: ["@babel/react", ['@babel/env', {
targets: {
browsers: ['last 2 versions']
}
}]]
}
}]
}
};
2. 前端路由
路由和上面的事件一样也是同构，因为路由本身也是通过修改URL，触发监听URL变化的事件来切换页面内容的。
所以，类似前面的逻辑：
- 首先浏览器向服务器发送请求，服务器返回一个空的html。
- 浏览器再请求JS，加载到js后会执行react代码。
- react代码接管页面执行流程，这个时候可以根据浏览器的地址展示页面内容。
也就是说，首页是服务端拼接好的，后面是基于JS代码进行内容切换，即后续页面内容由JS生成。
（1）下载依赖
yarn add react-router-dom
注意：
- 这里的
react-router-dom不能下载6.x版本的。因为最新版已经弃用了staticRouter，而我们需要用到。下载react-router-dom@5.3.0
（2）定义路由规则
// ./src/Routes.js
import React from 'react';
import {Route} from 'react-router-dom'
import Home from './containers/Home';
import Login from './containers/Login';
export default (
<div>
<Route path='/' exact component={Home}></Route>
<Route path='/login' exact component={Login}></Route>
</div>
);
（3）路由导航组件
在Header中引入Link, 并且使用他跳转至Home和Login。
// ./src/components/Header/index.js
import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
return (
<div>
<Link to="/">Home</Link>
<br />
<Link to="/login">Login</Link>
</div>
)
}
export default Header;
（4）组件中引入导航组件
新建一个Login组件，用于测试路由跳转
// .src/containers/Login/index.js
import React from 'react';
import Header from '../../components/Header';
const Login = () => {
return (
<div>
<Header />
<div> Login </div>
</div>
)
};
export default Login;
Home组件中也需要引入Header组件
// containers/Home/index.js
import React from 'react';
import Header from '../../components/Header';
const Home = () => {
return (
<div>
<Header />
home
<button onClick={() => { alert('click'); }}>按钮</button>
</div>
)
}
export default Home
同构代码
路由规则需要在客户端执行
import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import Routes from '../Routes'
const App = () => {
return (
<BrowserRouter>
{Routes}
</BrowserRouter>
)
}
ReactDom.hydrate(<App />, document.getElementById('root'));
服务端代码
路由规则也需要在服务端执行
- 服务端要使用
StaticRouter组件替代浏览器的browserRouter。 StaticRouter是不知道请求路径是什么的，因为他运行在服务器端，这是他不如BrowserRouter的地方，他需要在请求体中获取到路径传递给他,。- 这里我们就需要将
content写在请求里面。将location的值赋为req.path。
// ./src/server/index.js
import express from 'express';
import { render } from './utils';
const app = express();
app.use(express.static('public'));
app.get('*', function(req, res) {
res.send(render(req))
});
app.listen(8000, () => {
console.log('listen:8000')
})
提取出render模块：
// ./src/server/utils.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import Routes from '../Routes';
export const render = (req) => {
const content = renderToString((
<StaticRouter location={req.path} context={{}}>
{Routes}
</StaticRouter>
));
return `
<html>
<head>
<title>这里是Palate的博客</title>
</head>
<body>
<div id="root">${content}</div>
<script src="/index.js"></script>
</body>
</html>
`;
}
启动项目，可以看到
页面源码
<html>
<head>
<title>这里是Palate的博客</title>
</head>
<body>
<div id="root">
<div>
<div>
<div>
<a href="/">Home</a>
<br/>
<a href="/login">Login</a>
</div>
home<button>按钮</button>
</div>
</div>
</div>
<script src="/index.js"></script>
</body>
</html>
注意
- 当我们在做页面同构的时候，服务器端渲染只放生在我们第一次进入页面的时候，后面使用Link的跳转都是浏览器端的跳转。
- 所以服务器端渲染不是每个页面都做服务器端渲染，而是只访问的第一个页面具有服务端渲染的特性，其他的页面仍旧是React的路由机制, 这是我们要注意的。
3. 小结
这一步讲同构代码，主要是事件绑定和前端路由的实现。
基本思路就是：
- 两套代码，一套在服务端运行一次，一套在客户端运行一次。服务端完成html元素的渲染，客户端完成元素事件的绑定。
- 把React组件和路由规则编译打包成JS文件交给服务端。
- 服务端先发送HTML给客户端。客户端解析HTML模板时，通过script标签请求并加载JS文件激活页面。
路由：服务端需要将路由逻辑执行一遍，服务端的路由使用的是 StaticRouter。
第三步：引入Redux
1. 安装依赖
yarn add redux react-redux redux-thunk
2. 创建全局store
// src/client/index.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
//合并项目组件中store的reducer
const reducer = combineReducers({
home: homeReducer
})
// 导出创建store方法
const getStore = () => {
return createStore(reducer, applyMiddleware(thunk));
}
export default getStore;
3. 项目引入store
对于store的连接操作，在同构项目中分两个部分，一个是与客户端store的连接，另一部分是与服务端store的连接。通过react-redux中的Provider来传递store
// utils.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import Routes from '../Routes';
import getStore from '../store'; // 使用store
import { Provider } from 'react-redux';
const store = getStore()
export const render = (req) => {
const content = renderToString((
<Provider store={store}>
<StaticRouter location={req.path} context={{}}>
<Routes />
</StaticRouter>
</Provider>
));
return `
<html>
<body>
<div id="root">${content}</div>
<script src="/index.js"></script>
</body>
</html>
`;
}
// client/index.js
import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import Routes from '../Routes'
import { Provider } from 'react-redux';
import getstore from '../store'; // 使用store
const store = getStore()
const App = () => {
return (
<Provider store={store}>
<BrowserRouter >
{Routes}
</BrowserRouter>
</Provider>
)
}
ReactDom.hydrate(<App />, document.getElementById('root'));
到这里，就完成了Redux的引入
4. 创建服务端资源
在根目录的public文件夹下
// api/news.json
{
"data": [
{
"id": 1,
"title": "1111111"
},
{
"id": 2,
"title": "2222222"
},
{
"id": 3,
"title": "3333333"
},
{
"id": 4,
"title": "4444444"
},
{
"id": 5,
"title": "5555555"
}
]
}
- 可以通过
localhost:8000/api/news.json访问到该数据，可以在浏览器中尝试。 - 我们下面要做的做的就是让Home组件请求到这个数据。
注意：浏览器会自动请求一个favicon文件，造成代码重复执行，我们可以在public文件夹中加入这个图片解决该问题。
5. 组件内action和reducer的构建
下载axios
yarn add axios
四个JS文件
在Home文件夹下创建store文件夹，创建以下文件
// constants.js
export const CHANGE_LIST = 'HOME/CHANGE_LIST'; // 存储常量
// actions.js
import axios from 'axios';
import { CHANGE_LIST } from "./constants";
//普通action
const changeList = list => ({
type: CHANGE_LIST,
list
});
export const getHomeList = () => {
return dispatch => {
//请求服务端资源
return axios.get('http://localhost:8000/api/news.json')
.then((res) => {
const list = res.data.data;
dispatch(changeList(list))
})
}
}
// reducer.js
import { CHANGE_LIST } from './constants';
const defaultState = { //初始化数据
name: 'palate',
list: []
}
export default (state = defaultState, action) => {
switch (action.type) {
case CHANGE_LIST:
const newState = {
...state,
list: action.list // 修改数据
}
return newState
default:
return state;
}
}
// index.js
import reducer from "./reducer";
//这么做是为了导出reducer让全局的store来进行合并
//那么在全局的store下的index.js中只需引入Home/store而不需要Home/store/reducer.js
//因为脚手架会自动识别文件夹下的index文件
export { reducer }
6. 组件连接全局store
// src/container/Home/index.js
import React, { Component } from 'react';
import Header from '../../components/Header';
import { connect } from 'react-redux';
import { getHomeList } from './store/actions';
class Home extends Component {
getList() {
const { list } = this.props;
return list.map(item => <div key={item.id}>{item.title}</div>)
}
render() {
return (
<div>
<Header/>
<div>Home</div>
{this.getList()}
<button onClick={() => { alert('click1'); }}>按钮</button>
</div>
)
}
componentDidMount() {
this.props.getHomeList() // 更新数据
}
}
const mapStatetoProps = state => ({ // 传入sotre中的数据
list: state.home.list
});
const mapDispatchToProps = dispatch => ({ // 传入更新数据方法
getHomeList() {
dispatch(getHomeList());
}
})
// 组件使用react-redux提供的connect方法连接store
export default connect(mapStatetoProps, mapDispatchToProps)(Home);
componentDidMount()在服务端无法执行，需要添加一个静态方法Home.loadData加载数据，这个方法只在服务端有效。
// src/container/Home/index.js
// 省略其他内容...
Home.loadData = (store) => {
// 执行action，扩充store。
return store.dispatch(getHomeList());
}
7. 改造路由
这里需要改造一下路由配置，根据路由来判断是否需要通过loadData加载数据。
// src/Routes.js
import React from 'react';
import Home from './components/Home';
import Login from './components/Login';
export default [
{
path: '/',
component: Home,
exact: true,
key: 'home',
loadData: Home.loadData // 服务端异步获取数据方法
},
{
path: '/login',
component: Login,
key: 'login',
exact: true
}
]
使用Router.js的地方也要修改
<Provider store={store}>
<BrowserRouter>
<div>
{
routers.map(route => {
<Route {...route} />
})
}
</div>
</BrowserRouter>
</Provider>
<Provider store={store}>
<StaticRouter>
<div>
{
routers.map(route => {
<Route {...route} />
})
}
</div>
</StaticRouter>
</Provider>
6. 渲染list数据
先下载react-router-config
在server/utils.js中加入以下逻辑
import { matchRoutes as matchRoute } from 'react-router-config';
// ...获取store之后：
//调用matchRoutes用来匹配当前路由(支持多级路由)
const matchedRoutes = matchRoute(routes, req.path)
//promise对象数组
let promises = [];
matchedRoutes.forEach(item => {
//如果这个路由对应的组件有loadData方法
if (item.route.loadData) {
promises.push(item.route.loadData(store));
}
});
Promise.all(promises).then(() => {
//此时该有的数据都已经到store里面去了（renderToString操作）
//执行渲染的过程(res.send操作)
})
将对server的内容整理一下，提取出render函数
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter, Route } from 'react-router-dom';
import Routes from '../Routes';
import getStore from '../store'; // 使用store
import { Provider } from 'react-redux';
import { matchRoutes as matchRoute } from 'react-router-config';
export const render = (req, res) => {
const store = getStore();
const matchedRoutes = matchRoute(Routes, req.path);
let promises = [];
matchedRoutes.forEach(item => {
if (item.route.loadData) {
promises.push(item.route.loadData(store));
}
});
Promise.all(promises).then(() => {
const content = renderToString((
<Provider store = { store } >
<StaticRouter location={req.path} context={{}}>
<div>
{
Routes.map(route => (
<Route {...route} />
))
}
</div>
</StaticRouter >
</Provider>
));
res.send(`
<html>
<body>
<div id="root">${content}</div>
</body>
<script src="/index.js"></script>
</html>
`);
})
}
server/index.js
import express from 'express';
import { render } from './utils';
const app = express();
app.use(express.static('public'));
app.get('*', function(req, res) {
render(req, res)
});
app.listen(8000, () => {
console.log('listen:8000')
})
7. 数据注水和脱水
目的：解决客户端和服务端的store可能不同步的问题。
- 因为服务端和客户端的store是分别创建的，如果中间有代码不一致，就有可能导致store不同步。
- 以服务端的store为准，客户端获取服务端的store。
这就需要分两步进行：
（1）注水
数据的“注水”操作，即把服务端的store数据注入到window全局环境中。
做法：在返回的html代码中加入这样一个script标签：
<script>
window.context = {
state: ${JSON.stringify(store.getState())}
}
</script>
（2）脱水
接下来是“脱水”处理，换句话说也就是把window上绑定的数据给到客户端的store，可以在客户端store产生的源头进行，即在全局的store/index.js中进行。
import { legacy_createStore as createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { reducer as homeReducer } from '../containers/Home/store';
//合并项目组件中store的reducer
const reducer = combineReducers({
home: homeReducer
})
//创建store，并引入中间件thunk进行异步操作的管理
// 导出创建store的方法，每个用户执行这个函数就会拿到一个新的store
export const getStore = () => {
return createStore(reducer, applyMiddleware(thunk));
}
//客户端的store创建函数
export const getClientStore = () => {
const defaultState = window.context ? window.context.state : {};
return createStore(reducer, defaultState, applyMiddleware(thunk));
}
然后对引入getStore的地方进行修改，这里省略了。
这样我们访问浏览器就可以发现页面结构已经渲染出来了。
8. 注意问题
1.渲染出页面后，可能会遇到报错情况
需要在script标签添加 defer属性，避免阻塞HTML解析
2.注意需要使用div包裹一下所有Route，否则会报错。因为react-route-dom要求route成组出现。
3.避免组件重复获取数据
- 因为数据已经在服务端获取并拼接在HTML结构中了，所以判断服务端已经获取到数据，就不重复获取。
componentDidMount() {
if (!this.props.list.length) { //判断当前的数据是否已经从服务端获取
this.props.getHomeList() // 请求数据
}
}
- 那为什么不直接删掉？
- 因为该页不一定是作为首页展现，而是跳转到该页面的，这时候还是需要发送请求。
9. 小结
在这一步完成的redux的引入和异步请求数据。
- 对于store的连接操作，在同构项目中分两个部分，一个是与客户端store的连接，另一部分是与服务端store的连接。
- 客户端和服务端都需要异步获取数据和创建store。
- 客户端需要获取服务端的store，保持数据同步。（注水、脱水）
第四步：node作中间层
1. 为什么引入中间层
- 前端每次发送请求都是去请求
node层的接口，然后node层对于相应的前端请求做转发，用node层去请求真正的后端接口获取数据，获取后再由node层做对应的数据计算等处理操作，然后返回给前端。 node层替前端接管了对数据的操作，减轻对服务器端的性能消耗。- 之前搭建的SSR框架中，服务端和客户端请求利用的是同一套请求后端接口的代码，但这是不合理的。
2. 组件请求判断
- 我们先对组件的请求做个修改，判断请求时哪里发出的。
- 如果是在客户端，那么是发送给该中间层。中间层请求是发送到真正的服务端。
//actions.js
//参数server表示当前请求是否发生在node服务端
const getUrl = (server) => {
return server ? 'xxxx(后端接口地址)' : '/api/sanyuan.json(node接口)';
}
//这个server参数是Home组件里面传过来的，
export const getHomeList = (server) => {
return dispatch => {
return axios.get(getUrl(server))
.then((res) => {
const list = res.data.data;
dispatch(changeList(list))
})
}
}
Home组件调用getHome()时需要传入参数
在componentDidMount中调用这个action时传入false，因为这个是客户端发送的请求
在loadData函数中调用时传入true，因为这个是中间层发送的请求
3. 中间层转发请求
//增加如下代码
import proxy from 'express-http-proxy';
//相当于拦截到了前端请求地址中的/api部分，然后换成另一个地址
app.use('/api', proxy('http://xxxxxx(服务端地址)', {
proxyReqPathResolver: function(req) {
return '/api'+req.url;
}
}));
4. 代码优化
请求在组件中判断并不合理。其实，每个组件中都需要进行一样的判断。
（1）封装axios
我们把这部分判断提取出来，对axios做一个封装。
//新建server/request.js
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://xxxxxx(服务端地址)'
})
export default instance
//新建client/request.js
import axios from 'axios'
const instance = axios.create({
//即当前路径的node服务
baseURL: '/'
})
export default instance
（2）通过store传递
import { legacy_createStore as createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { reducer as homeReducer } from '../containers/Home/store';
import clientAxios from '../client/request';
import serverAxios from '../server/request';
const reducer = combineReducers({
home: homeReducer
})
export const getStore = () => {
//让thunk中间件带上serverAxios
return createStore(reducer, applyMiddleware(thunk.withExtraArgument(serverAxios)));
}
export const getClientStore = () => {
const defaultState = window.context ? window.context.state : {};
//让thunk中间件带上clientAxios
return createStore(reducer, defaultState, applyMiddleware(thunk.withExtraArgument(clientAxios)));
}
（3）组件内获取axios实例
export const getHomeList = () => {
//返回函数中的默认第三个参数是withExtraArgument传进来的axios实例
return (dispatch, getState, axiosInstance) => {
return axiosInstance.get('资源地址')
.then((res) => {
const list = res.data.data;
dispatch(changeList(list))
})
}
}
5. 另外启动一个服务
这个服务是用来接收中间层发送过来的请求的，将前面放在public/api/news.json放置在该项目中
const express = require("express")
const app = express()
app.use(express.static('public'))
app.listen(4000, () => { console.log('running 4000') })
- 将这个是目标服务器，先启动该服务，再启动原来的项目，可以看到数据成功展示。（因为请求方式没有变化）
- 这里可以先将中间层获取数据的逻辑去掉尝试一下，因为中间层获取数据并拼接到HTML中了，客户端不会重新获取。
- 或者在login页面测试一下，因为这里是经过跳转的，获取数据就需要客户端发送请求。
6. 小结
- 在这里将启动了另外一个服务器，作为真正的目标服务器。
- 而之前搭建的作为中间层，只负责页面渲染和请求转发。
- 这一步实现了请求转发，也就是客户端发送请求到中间层，中间层转发请求给目标服务器，从目标服务器获取数据。
- 使用
thunk.withExtraArgument传递封装的axios请求。
这里需要注意，中间层渲染出页面的时候会向后端发送请求
第五步：多级路由渲染
1. 修改路由规则
现在的需求是，页面中有一个App组件包含所有组件
import Home from './containers/Home';
import Login from './containers/Login';
import App from './App'
//这里出现了多级路由
export default [{
path: '/',
component: App,
routes: [
{
path: "/",
component: Home,
exact: true,
loadData: Home.loadData,
key: 'home',
},
{
path: '/login',
component: Login,
exact: true,
key: 'login',
}
]
}]
2. App组件
前面我们再Home组件和Login组件中分别引用了Header组件，这里实现共用一个
import React from 'react';
import Header from './components/Header';
const App = (props) => {
console.log(props.route)
return (
<div>
<Header></Header>
</div>
)
}
export default App;
记得将Header组件从其它两个组件中去掉。
3. 修改路由渲染形式
将服务端和客户端路由渲染的形式由原来的
{
Routes.map(route => (
<Route {...Route} />
))
}
改为：
import { renderRoutes } from 'react-router-config';
{renderRoutes(Routes)}
这里用到的renderRoutes方法，就是根据url渲染一层路由的组件(这里渲染的是App组件)，然后将下一层的路由通过props传给目前的App组件，依次循环。
4. 小结
这一步比较简单，新建一个App组件包含所有组件。
第六步：CSS服务端渲染
1. 客户端
下载依赖
yarn add -D style-loader css-loader
对应配置
在webpack文件中进行配置
const clientConfig = {
mode: 'development',
entry: './src/client/index.js',
module: {
rules: [{
test: /\.css?$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: true
}
}]
}]
},
引入CSS文件
import styles from './style.css';
- 这个时候打开启动项目，就可以看到页面有样式了。
- 但是打开源码，发现并没有样式代码。
2. 服务端
下载依赖
服务端使用的是isomorphic-style-loader，对应配置：
module: {
rules: [{
test: /\.css?$/,
use: ['isomorphic-style-loader', {
loader: 'css-loader',
options: {
modules: true
}
}]
}]
}
获取css代码
引入css文件时，styles中挂了三个函数。通过styles._getCss即可获得CSS代码。react-router-dom中的StaticRouter中已经帮我们准备了一个钩子变量context。CSS代码可以从这里传入。- 在路由配置对象routes中的组件都能在服务端渲染的过程中拿到这个context，而且这个context对于组件来说，就相当于组件中的props.staticContext。
注意：这个props.staticContext只会在服务端渲染的过程中存在，而客户端渲染的时候不会被定义。
//context从外界传入
<StaticRouter location={req.path} context={context}>
<div>
{renderRoutes(routes)}
</div>
</StaticRouter>
我们需要在服务端的render函数执行之前，初始化context变量的值:
let context = { css: [] }
在组件中获取到CSS代码
//context从外界传入
<StaticRouter location={req.path} context={context}>
<div>
{renderRoutes(routes)}
</div>
</StaticRouter>
服务端的renderToString执行完成后，拼接css代码
//拼接代码
const cssStr = context.css.length ? context.css.join('\n') : '';
挂载到页面
//放到返回的html字符串里的header里面
<style>${cssStr}</style>
接下来就可以查看结果
这是依赖版本引起的问题，修改webpack配置，将esModule改为false
options: {
modules: true,
esModule: false
}
3. 小结
- 在CSS引入组件时获取到CSS的代码，放入routes提供的context中。
- 在输出HTML前，将CSS代码进行拼接，然后注入到HTML代码中。
到这里，一个服务端渲染项目的就基本搭建好了。
参考:
