上回我们完成了开发环境的热更新,这次我们要完成的是针对SSR的路由。
服务端渲染的路由和客户端渲染的路由并没有很大差距,主要差距在服务端接受到url之后解析路由拿到的数据,然后返回特定页面,之后的的渲染又全部交由客户端完成。
也就是说,服务端渲染其实只在用户第一次访问的时候,服务端路由是起效的,之后全部是靠客户端完成的。但是这里我们要考虑路由匹配失效的情况。
首先我们下载react-router-dom
npm install react-router-dom --save-dev
我们先从客户端路由写起,这段应该都特熟悉了,就不多说了。
在app文件夹内建立router文件夹,然后在router文件夹内建立enter-client.js文件
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
NavLink
} from "react-router-dom";
import hello from "../pages/hello";
import hello2 from "../pages/hello2";
import React from 'react'
import Nofound from './nofound'
export default class Root extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Router>
<div>
<div className="title">This is a react ssr demo</div>
<ul className="nav">
<li><NavLink to="/">hello</NavLink></li>
<li><NavLink to="/two">hello2</NavLink></li>
</ul>
<div className="view">
<Switch>
<Route path="/" exact component={hello} />
<Route path="/two" component={hello2} />
<Nofound code={404}>
<div>
<h1>Not Found</h1>
</div>
</Nofound>
</Switch>
</div>
</div>
</Router>
);
}
}
这个是最基本的路由,基本没什么可说的,硬要说有什么需要注意的,就是添加了几个新的组件,hello和hello2,还有应对404的Nofound组件,helllo组件就是之前的那个组件,只不过还了个地方,hello2组件就是复制的hello组件,改了几个字,方便识别。
Nofound组件为
import React from "react";
import { Route } from "react-router-dom";
const Nofound = (props) => (
<Route render={({nofoundContext}) => {
return props.children;
}} />
);
export default Nofound;
这个enter-client.js是客户端路由,对应的引入地址应该是客户端打包的index.js。而与之相对的还有服务端路由,服务端路由和客户端路由基本一致,不同的是,他没有Router组件包裹,而是使用StaticRouter组件包裹。
新建enter-server.js
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
NavLink,
StaticRouter
} from "react-router-dom";
import hello from "../pages/hello";
import hello2 from "../pages/hello2";
import React from 'react'
import Nofound from './nofound'
class Root extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div className="title">This is a react ssr demo</div>
<ul className="nav">
<li><NavLink to="/">hello</NavLink></li>
<li><NavLink to="/two">hello2</NavLink></li>
</ul>
<div className="view">
<Switch>
<Route path="/" exact component={hello} />
<Route path="/two" component={hello2} />
<Nofound code={404}>
<div>
<h1>Not Found</h1>
</div>
</Nofound>
</Switch>
</div>
</div>
);
}
}
const ServerRouter = (context, url)=>{
const CreateRouter = () => {
return (
<StaticRouter context={context} location={url}>
<Root/>
</StaticRouter>
)
}
return <CreateRouter/>;
}
module.exports = {
ServerRouter
};
enter-server的引入地方应该是运行服务的server.js
在sever/server.js中,我们之前引入的模块是hello模块,而现在我们应该引入的是
import ServerRouter from '../app/router/enter-server'
之前我们的express配置的路由是遇到 ‘/’ 返回hello模块,现在更改为
server.get('*', (req, res) => {
let context = {};
let component = ServerRouter.ServerRouter(context, req.url);
const appString = renderToString(component);
res.send(template({
body: appString,
title: 'Hello World from the server',
}));
});
使用*来代替/是为了让他匹配所有路径,把url传递进路由组件里面,让路由自己返回正确的模块。
好了这样我们的路由组件就写好了,下面我们来写他的数据部分。
下一步我们就要让数据在前后端统一化,不然的话就是我们这边发送的东西和用户实际看到的页面有差别,如果我们的js比较大,加载的时候比较长,对用户的体验会不太好。
说道数据这里就需要使用redux了。但是reudx的具体用法就不多讲了,代码会上传到github,可以对照着看一下,这里仅仅说一下redux在服务端的的写法。
通过阅读redux的官方文档,我们可以直接服务端的redux和客户端的redux主要差别有两点
一个是需要在每次请求的时候,创建一个新的store。
另一个是在每次请求都需要执行该页面的初始化的action。
为什么需要这样的东西呢?其实都是为了页面展示正确的渲染效果,因为页面本身是没有数据的,在客户端我们在componentDidMount中进行初始化,但是在服务端,输出字符串的时候并不会触发componentDidMount,虽然他会触发componentWillMount,但是也有其他的问题。
所以我们需要再请求的时候触发一个初始化的action,既然有action,那么我们也就需要一个store,所以我们需要再请求来临之后创建一个全新的store。
所以全部的核心思想就是上面这两点。下面我们来改造一下我们的server.js
server.get('*', (req, res) => {
const store = createStore({});
let context = {},promises;
let component = ServerRouter.ServerRouter(context, req.url,store);
getLoadableState(component).then(loadableState => {
let matchs = matchRoutes(router, req.path);
promises = matchs.map(({ route, match }) => {
const asyncData = route.component.Component.asyncData;
return asyncData ? asyncData(store, Object.assign(match.params, req.query)) : Promise.resolve(null);
});
Promise.all(promises).then(() => {
const appString = renderToString(component);
res.send(template({
body: appString,
title: 'Hello World from the server',
}));
}).catch(error => {
console.log(error);
res.status(500).send("Internal server error");
});
})
});
这里解释一下,matchRoutes的第一个参数是路由,这里更改了一下路由的写法,方便维护。路由更改为
import Loadable from "loadable-components";
import TopList from "../pages/TopList"
import hello from "../pages/hello"
import hello2 from "../pages/hello2"
const router = [
{
path: "/",
component: Loadable(()=>import('../pages/TopList')),
exact: true
},
{
path: "/one",
component: hello
},
{
path: "/two",
component:hello2
}
];
export default router;
那asyncData又是什么呢?
static asyncData(store) {
return store.dispatch(something());
}
这个是在每个组件中的一个静态函数,函数中写明你需要执行的action,就可以在请求之后执行这个action了。
以上就完成了一个react项目的服务端加载的骨架了,细微处肯定还有大量的问题等待完善,但是我不打算完善他了,毕竟这只是用来认知react的ssr到底是怎么运行的,而不是用来写项目的,那用什么写呢?
你听说过安利NEXT.js吗?
附录:项目地址