React服务端渲染（前后端路由同构）-白红宇

Web应用是通过url访问某个具体的HTML页面，每个url都对应一个资源。传统的Web应用中，浏览器通过url向服务器发送请求，服务器读取资源并把处理好的页面内容发送给浏览器，而在单页面应用中，所有url变化的处理都在浏览器端完成，url发生变化时浏览器通过js将内容替换。对于服务端渲染的应用，当请求某个url资源，服务器要将该url对应的页面内容发送给浏览器，浏览器下载页面引用的js后执行客户端路由初始化，随后的路由跳转都是在浏览器端，服务端只负责从浏览器发送请求的第一次渲染

首先在之前搭建的项目中src目录下创建4个页面组件

然后安装React Web端依赖react-router-dom

注：react-router-dom版本4.x
上一节：

源码地址见文章末尾

本节服务端代码已进行重写，详情请戳

前端路由

编写React路由时，我们先用最基本的做法，在App.jsx中使用BrowserRouter组件包裹根节点，用NavLink组件包裹li标签中的文本

import {   BrowserRouter as Router,  Route,  Switch,  Redirect,  NavLink} from "react-router-dom";import Bar from "./views/Bar";import Baz from "./views/Baz";import Foo from "./views/Foo";import TopList from "./views/TopList";复制代码

render() {  return (    
          
             
      
       This is a react ssr demo
      
        
                
       
        
         Bar
        
          
       
        
         Baz
        
          
       
        
         Foo
        
          
       
        
         TopList
        
        
      
        
                
                   
                    
                    
                    
                    
                  
               
      
      
     
    
      );}复制代码

上述代码中每个路由视图都用Route占位，而路由视图对应的组件在当前组件中都需要import进来，如果有路由嵌套，视图组件就会被分散到不同的组件中被import，当组件嵌套太多，会变得难以维护

接下来针对上述问题进行改造，所有视图组件都在一个js文件中import，导出一个路由配置对象列表，分别用path指定路由路径，component指定路由视图组件

src/router/index.js

import Bar from "../views/Bar";import Baz from "../views/Baz";import Foo from "../views/Foo";import TopList from "../views/TopList";const router = [  {    path: "/bar",    component: Bar  },  {    path: "/baz",    component: Baz  },  {    path: "/foo",    component: Foo  },  {    path: "/top-list",    component: TopList,    exact: true  }];export default router;复制代码

在App.jsx中导入配置好的路由对象，循环返回Route


      
     
          {      router.map((route, i) => (        
            ))    }    
        
     
    
复制代码

复杂的应用中免不了组件嵌套的情况，Route的component属性不仅可以传递组件类型还可以传递回调函数，通过回调函把当前组件的子路由通过props传递，然后继续循环

为了支持组件嵌套，我们使用Route进行封装一个NestedRoute组件

src/router/NestedRoute.jsx

import React from "react";import { Route } from "react-router-dom";const NestedRoute = (route) => (  
     
     
      }  />);export default NestedRoute;复制代码

然后从src/router/index.js中导出

import NestedRoute from "./NestedRoute";...export {  router,  NestedRoute}复制代码

App.jsx

import { router, NestedRoute } from "./router";复制代码


      
     
          {      router.map((route, i) => (        
            ))    }    
        
     
    
复制代码

使用嵌套的路由像下面这样

const router = [  {    path: "/a",    component: A  },  {    path: "/b",    component: B  },  {    path: "/parent",    component: Parent,    routes: [      {        path: "/child",        component: Child,      }    ]  }];复制代码

Parent.jsx

this.props.router.map((route, i) => (  
    ))复制代码

后端路由

服务端路由不同于客户端，它是无状态的。React提供了一个无状态的组件，向StaticRouter传递url，调用ReactDOMServer.renderToString()就能匹配到路由视图

在App.jsx中区分客户端和服务端，然后export不同的根组件

let App;if (process.env.REACT_ENV === "server") {  // 服务端导出Root组件  App = Root;} else {  App = () => {    return (      
            
           
        );  };}export default App;复制代码

接下来对entry-server.js进行修改，使用StaticRouter包裹根组件，传入上下文context和location，同时使用函数来创建一个新的组件

import React from "react";import { StaticRouter } from "react-router-dom";import Root from "./App";const createApp = (context, url) => {  const App = () => {    return (      
            
             
        )  }  return 
    ;}module.exports = {  createApp};复制代码

server.js中获取createApp函数

let createApp;let template;let readyPromise;if (isProd) {  let serverEntry = require("../dist/entry-server");  createApp = serverEntry.createApp;  template = fs.readFileSync("./dist/index.html", "utf-8");  // 静态资源映射到dist路径下  app.use("/dist", express.static(path.join(__dirname, "../dist")));} else {  readyPromise = require("./setup-dev-server")(app, (serverEntry, htmlTemplate) => {    createApp = serverEntry.createApp;    template = htmlTemplate;  });}复制代码

在服务端处理请求时把当前url传入，服务端会匹配和当前url对应的视图组件

const render = (req, res) => {  console.log("======enter server======");  console.log("visit url: " + req.url);  let context = {};  let component = createApp(context, req.url);  let html = ReactDOMServer.renderToString(component);  let htmlStr = template.replace("
    ", `
    
     ${html}
    
`);  // 将渲染后的html字符串发送给客户端  res.send(htmlStr);}复制代码

404和重定向

当请求服务器资源不存在时，服务器需要做出404响应，路由发生了重定向，服务器也需要重定向到指定的url。StaticRouter提供了一个props用来传递上下文对象context，在渲染路由组件时通过staticContext获取并设置状态码，服务端渲染时通过状态码判断做响应处理。如果服务端路由渲染时发生了重定向，通过context自动添加上与重定向相关信息的属性，如url

为了处理404状态，我们封装一个状态组件StatusRoute

src/router/StatusRoute.jsx

import React from "react";import { Route } from "react-router-dom";const StatusRoute = (props) => (  
    
      {    // 客户端无staticContext对象    if (staticContext) {      // 设置状态码      staticContext.status = props.code;    }    return props.children;  }} />);export default StatusRoute;复制代码

从src/router/index.js中导出

import StatusRoute from "./StatusRoute";...export {  router,  NestedRoute,  StatusRoute}复制代码

在App.jsx中使用StatusRoute组件


      
     
          {      router.map((route, i) => (        
            ))    }    
          
            
               
        Not Found
      
       
    
        
     
    
复制代码

render函数修改如下

let context = {};let component = createApp(context, req.url);let html = ReactDOMServer.renderToString(component);if (!context.status) {  // 无status字段表示路由匹配成功  let htmlStr = template.replace("
    ", `
    
     ${html}
    
`);  // 将渲染后的html字符串发送给客户端  res.send(htmlStr);} else {  res.status(context.status).send("error code：" + context.status);}复制代码

服务端渲染时判断context.status，不存在status属性表示匹配到路由，存在则设置状态码并响应结果

App.jsx中使用了一个重定向路由<Redirect from="/" to="/bar" exact />，访问http://localhost:3000时就会重定向到http://localhost:3000/bar，而在StaticRouter中路由是没有状态的，无法进行重定向，当访问http://localhost:3000服务端返回的是App.jsx中渲染的html片段，不包含Bar.jsx组件渲染的内容

Bar.jsx的render方法如下

render() {  return (    
          
     
      Bar
     
    
    
  );}复制代码

因为客户端的路由，浏览器地址栏已经变成了http://localhost:3000/bar，并且渲染出Bar.jsx中的内容，但是客户端和服务端渲染不一致

在server.jsx中增加一行代码console.log(context)

let context = {};let component = createApp(context, req.url);let html = ReactDOMServer.renderToString(component);console.log(context);...复制代码

然后访问http://loclahost:3000，可以在终端看到以下输出信息

======enter server======visit url: /{ action: 'REPLACE',  location: { pathname: '/bar', search: '', hash: '', state: undefined },  url: '/bar' }复制代码

通过context获取url进行服务端重定向处理

if (context.url) {  // 当发生重定向时，静态路由会设置url  res.redirect(context.url);  return;}复制代码

此时访问http://loclahost:3000，浏览器发送了两次请求，第一次请求/，第二次重定向到/bar

Head管理

每一个页面都有对应的head信息如title、meta和link等，这里使用插件来管理Head，它同时支持服务端渲染

先安装react-helmet

npm install react-helmet

然后在App.jsx中import，添加自定义head

import { Helmet } from "react-helmet";复制代码


      
         
      This is App page    
        
       
     
      This is a react ssr demo
     
  ...
    
复制代码

在服务端渲染时，调用ReactDOMServer.renderToString()后需要调用Helmet.renderStatic()才能获取head相关信息，为了在server.js中使用App.jsx中的Helmet，需要在入口entry-server.js和App.jsx做一些修改

entry-server.js

const createApp = (context, url) => {  const App = () => {    return (      
            
     
       App.head = head}/>        
     
        )  }  return 
    ;}复制代码

App.jsx

class Root extends React.Component {  constructor(props) {    super(props);    if (process.env.REACT_ENV === "server") {      // 当前如果是服务端渲染时将Helmet设置给外层组件的head属性中      this.props.setHead(Helmet);    }  }  ...}复制代码

给Root组件传入一个props函数setHead，在Root组件初始化时调用setHead函数给新的App组件添加一个head属性

修改模板index.html，添加作为head信息占位

    
        
        
        React SSR    
    复制代码

在server.js中进行替换

if (!context.status) {  // 无status字段表示路由匹配成功  // 获取组件内的head对象，必须在组件renderToString后获取  let head = component.type.head.renderStatic();  // 替换注释节点为渲染后的html字符串  let htmlStr = template  .replace(/.*<\/title>/, `${head.title.toString()}`)  .replace("<!--react-ssr-head-->", `${head.meta.toString()}\n${head.link.toString()})`)  .replace("<!--react-ssr-outlet-->", `
    
     ${html}
    
`);  // 将渲染后的html字符串发送给客户端  res.send(htmlStr);} else {  res.status(context.status).send("error code：" + context.status);}复制代码

component是<App />经过jsx语法转换后的对象，component.type是获取该对象的组件类型，这里是entry-server.js中的App

注意：这里必须通过App.jsx中import进来的Helmet调用renderStatic()后才能获头部信息

访问http://localhost:3000时，头部信息已经被渲染出来了

每一个路由对应一个视图，每一个视图都有各自的head信息，视图组件是嵌套在根组件中的，当组件发生嵌套使用react-helmet时会自动替换相同的信息

在Bar.jsx、Baz.jsx、Foo.jsx和TopList.jsx中分别使用react-helmet自定义标题。如

class Bar extends React.Component {  render() {    return (      
            
               
      Bar        
             
     
      Bar
     
      
    
    );  }}复制代码

浏览器输入http://localhost:3000/bar时标题渲染成<title data-react-helmet="true">Bar</title>

输入http://localhost:3000/baz时标题渲染成<title data-react-helmet="true">Baz</title>

总结

本节对React基本路由进行配置化管理，使得维护起来更加简单，也为后续数据预取奠定了基础。在服务端路由渲染中使用了StaticRouter组件，这个组件有context和location两个props，渲染时可以自行给context赋予自定义属性，比如设置状态码，location则用来匹配路由。服务端渲染中head信息必不可少，react-helmet插件提供了简单的用法来定义head信息，同时支持客户端和服务端