为什么要服务端渲染（ssr）

首屏等待

在 SPA 模式下，所有的数据请求和 DOM 渲染都在浏览器端完成，所以当我们第一次访问页面的时候很可能会存在“白屏”等待，而服务端渲染所有数据和 html 内容已在服务端处理完成，浏览器收到的是完整的 html 内容，可以更快地看到渲染内容，在服务端完成数据请求肯定要比浏览器端效率高得多。

SEO

SPA 由于加载模版的时候页面骨架上面只有一个节点，其余所有节点都是由 JS 动态生成的，因为搜索引擎爬虫只认识 html 结构的内容，不能识别 JS 代码内容，所以对于 SEO，完全无能为力。

核心原理

整体来说服务端渲染原理不复杂，核心内容就是同构。

node server 接收到客户端请求，得到当前的 req url path，然后在已有的路有列表内查找对应的组件，拿到需要请求去的数据，将数据作为 props、context 或者 store 形式存入组件，然后基于 react 内置的服务端渲染 api renderToString 或者 renderToNodeStream 把组件渲染为 html 字符串或者 stream 流，在把最终的 html 进行输出前需要将数据注入到浏览器端（注水），server 输出（response）后浏览器可以得到数据（脱水），浏览器开始进行渲染和节点比对，然后执行组件的 componentDidMount 完成组件内事件绑定和一些交互，浏览器重用了服务端输出的 html 节点，整个流程结束。

服务端渲染架构图

React SSR

从 ejs 开始

实现 ssr 很简单，先看一个 node ejs 的例子

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title><%= title %></title>
    </head>
    <body>
        <%= data %>
    </body>
</html>

// node ssr
const ejs = require("ejs");
const http = require("http");

http
    .createServer((rea, res) => {
        if (req.url === "/") {
            res.writeHead(200, {
                "Content-Type": "text/html",
            });
            ejs.renderFile(
                "./views/index.ejs",
                {
                    title: "react ssr",
                    data: "首页",
                },
                (err, data) => {
                    if (err) console.log(err);
                    else res.end(data);
                }
            );
        }
    })
    .listen(8080);

JSX 到字符串

参考上面，我们使用 React 组建来实现服务端渲染，使用 jsx 来代替 ejs。

const React = require("react");
const { renderToString } = require("react-dom/server");
const http = require("http");

// 组件
class App extends React.Component {
    render() {
        return <h1>{this.props.data.title}</h1>;
    }
}

// 模拟数据获取
const fetch = function () {
    return {
        title: "react ssr",
        data: [],
    };
};

http
    .createServer((req, res) => {
        if (req.url === "/") {
            res.writeHead(200, {
                "Content-Type": "text/html",
            });
            const data = fetch();
            const html = renderToString(<Index data={data} />);
            res.end(html);
        }
    })
    .listen(8080);

ps：以上代码不能直接运行，需要结合 babel 使用 @babel/preset-react 进行转换

关键问题

在上面非常简单的就实现了 react ssr，它帮助我们引出了一系列关键问题：

双端路由如何维护？

首先我们会发现我在 server 端定义了路由 '/'，但是在 react SPA 模式下我们需要使用 react-router 来定义路由，那是不是需要维护两套路由？

获取数据的方法和逻辑写在哪里？

我们发现获取数据的 fetch 方法是独立的，和组件没有任何关联，我们更希望每个路由组件都有自己的 fetch 方法。

服务端 html 节点无法重用

虽然组件在服务端得到了数据，也能渲染到浏览器内，但是当浏览器端进行组件渲染的时候，直出的内容会一闪而过消失。

同构才是核心

react ssr 的核心就是同构，没有同构的 ssr 是没有意义的。

所谓同构就是采用一套代码，构建双端（server 和 client）逻辑，最大限度的重用代码，不用维护两套代码。而传统的服务端渲染无法做到，react ssr 的出现打破了这个瓶颈，并且已经得到了比较广泛的应用。

路由同构

双端使用同一套路由规则，node server 通过 req url path 进行组件查找，得到需要渲染的组件。

// 组件和路由配置，供双端使用 routes-config.js
import React from 'react'

class Detail from React.Component {
  render() {
    return <div>detail</div>
  }
}

class Index from React.Component {
  render() {
    return <div>index</div>
  }
}

const routes = [
  {
    path: '/',
    exact: true,
    component: Home
  },
  {
    path: '/detail',
    exact: true,
    component: Detail
  },
  {
    path: '/detail/:a/:b',
    exact: true,
    component: Detail
  }
]

export default routes

// 客户端路由组件
import routes from "./routes-config.js";

function App() {
    return (
        <Layout>
            <Switch>
                {routes.map((item, index) => {
                    return (
                        <Route
                            path={item.path}
                            key={index}
                            exact={item.exact}
                            render={item.component}
                        />
                    );
                })}
            </Switch>
        </Layout>
    );
}

export default App;

node server 进行组件查找

路由匹配其实就是对组件 path 规则的匹配，如果规则不复杂可以自己写，如果情况很多种还是使用官方提供的库来完成。

matchRoutes(routes, pathname)

import { matchRoutes } from "react-router-config";
import routes from "./routes-config.js";

http
    .createServer((req, res) => {
        const url = req.url;
        // 简单排出图片等资源文件的请求
        if (url.indexOf(".") > -1) {
            res.end("");
            return false;
        }

        res.writeHead(200, {
            "Content-Type": "text/html",
        });

        const data = fetch();
        // 查找组件
        const branch = matchRoutes(routes, url);
        // 得到组件
        const Component = branch[0].route.component;
        // 将组件渲染为 html 字符串
        const html = renderToString(<Component data={data} />);
        res.end(html);
    })
    .listen(8080);

matchRoutes 具体返回值查看官方文档

数据同构（预取同构）

这里我们解决【获取数据的方法和逻辑放在哪里？】

数据预取同构，解决双端如何使用同一套数据请求方法来进行数据请求。

在查找到要渲染的组件后，需要预先得到此组件所需要的数据，然后将数据传递给组件后，再进行组件的渲染。

我们可以通过给组件定义静态方法来处理，组件内定义异步数据请求的方法也合情合理，同时声明为 static，在服务端和组件内部都可以通过组件来进行访问，比如：Index.getInitialProps

// 组件
class Index extends React.Component {
    static async getInitialProps(opt) {
        const fetch1 = await fetch("/xxx.com/a");
        const fetch2 = await fetch("/xxx.com/b");
        return {
            res: [fetch1, fetch2],
        };
    }

    render() {
        return <h1>{this.props.data.title}</h1>;
    }
}

// 服务端
http
    .createServer((req, res) => {
        const url = req.url;
        if (url.indexOf(".") > -1) {
            res.end("");
            return false;
        }

        res.writeHead(200, {
            "Content-Type": "text/html",
        });

        // 组件查找
        const branch = matchRoutes(routes, url);
        // 得到组件
        const Component = branch[0].route.component;
        // 数据获取
        const data = Component.getinitialProps(branch[0].match.params);
        // 传入数据，渲染为 html字符串
        const html = renderToString(<Component data={data} />);

        res.end(html);
    })
    .listen(8080);

渲染同构

假设我们现在基于上面已经实现的代码，同时我们也使用了 webpack 进行了配置，对代码进行了转换和打包，整个服务可以跑起来。

路由能够正确匹配，数据预取正常，服务端可以直出组件的 html，浏览器加载 js 代码正常，查看网页源代码能看到 html 内容，好像我们整个流程都已经走完了。

但是当浏览器端的 js 执行完成后，发现数据重新请求了，组件的重新渲染导致页面看上去有些闪烁。

这是因为在浏览器端，双端节点对比失败，导致组件重新渲染，也就是只有服务端和浏览器端渲染的组件具有相同的 props 和 DOM 结构的时候，组件才能只渲染一次。

刚刚我们实现了双端的数据预取同构，但是数据也仅仅是服务端有，浏览器端并没有获取到这份数据，当浏览器进行首次组件渲染的时候没有初始化的数据，渲染出的节点和服务端直出的节点不同，导致组件重新渲染。

数据注水

在服务端将预取的数据注入到浏览器，使浏览器可以访问到，客户端进行渲染前将数据传入对应的组件即可，这样就保证了 props 的一致。

// node server
http
    .createServer((rea, res) => {
        const url = req.url;
        if (url.indexOf(".") > -1) {
            res.end("");
            return false;
        }
        res.writeHead(200, {
            "Content-Type": "text/html",
        });

        // 查找组件
        const branch = matchRoutes(routes, url);
        // 得到组件
        const Component = branch[0].route.component;
        // 数据预取
        const data = Component.getInitialProps(branch[0].match.params);
        // 组件渲染
        const html = renderToString(<Component data={data} />);
        // 数据注水
        const propsData = `<textarea style="display: none" id="server-render-data-BOX">${JSON.stringify(
            data
        )}</textarea>`;
        // 通过 ejs 模版引擎将数据注入到页面
        ejs.renderFile(
            "./index.html",
            {
                htmlContent: html,
                propsData,
            },
            (err, data) => {
                // 渲染数据的key：对应到了ejs中的index
                if (err) console.log(err);
                else {
                    console.log(data);
                    res.end(data);
                }
            }
        );
    })
    .listen(8080);

<!-- node ejs html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <div id="rootEle">
        <%- htmlContent %> <!-- 组件 html 内容 -->
    </div>

    <%- propsData %> <!-- 组件 init state ，现在是个字符串 -->
</body>

</html>
</body>

需要借助 ejs 模版，将数据绑定到页面上。

数据脱水

上一步数据已经注入到了浏览器端，这一步要在客户端组件渲染前先拿到数据，并且传入组件就可以了。

客户端可以直接使用 id=server-render-data-BOX 进行数据获取

第一个方法简单粗暴，直接在组件构造函数进行获取，后续可以使用高阶组件复用这部分逻辑

第二个方法可以通过 context 传递，只需要在入口处传入，在组件中声明 static contextType 即可，这种方法有利于后续引入 redux。

// 定义 context生产者 组件
import React from "react";
import RootContext from "./route-context";

export default class index extends React.Component {
    render() {
        return (
            <RootContext.Provider value={this.props.initialData || {}}>
                {this.props.children}
            </RootContext.Provider>
        );
    }
}

// 入口 app.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Routes from "../.";
import Provider from "./provider";

// 渲染入口 接收脱水数据
function renderUI(initialData) {
    ReactDOM.hydrate(
        <BrowserRouter>
            <Provider initialData={initialData}>
                <Routes />
            </Provider>
        </BrowserRouter>,
        document.getElementById("root"),
        (e) => {}
    );
}

// 函数执行入口
function entryIndex() {
    let APP_INIT_DATA = {};
    let state = false;
    // 取得数据
    let stateText = document.getElementById("server-render-data-BOX");
    if (stateText) {
        APP_INIT_DATA = JSON.parse(stateText.value || "{}");
    }

    if (APP_INIT_DATA) renderUI(APP_INIT_DATA); // 客户端渲染
}

entryIndex(); // 入口执行

通过 context 获取数据

import React from 'react'
import '../css/index.scss'

export default class Index extends React.Component {
  constructor(props, context) {
    super(props, context)

    // 将 context 存储到 state
    this.state = {
      ...context
    }
  }

  // 设置此参数，才能拿到 context 数据
  static contextType = RootContext

  // 数据预取方法
    static async getInitialProps(opt) {
    if(__SERVER__) {
      // 如果是服务端渲染，可以做的处理，node 端设置全局变量
    }
    const fetch1 = fetch.postForm('/xxx1')
    const fetch2 = fetch.postForm('/xxx2')
    const resArr = await fetch.multipleFetch(fetch1, fetch2)

    return {
      page: {},
      fetchData: resArr
    }
  }

    componentDidMount() {
    if(!this.isSSR) { // 非服务端渲染需要自身进行数据获取
      Index.getInitialProps(this.props.opt).then(data => {
        this.setState(data)
      })
  }

  render() {
    const { page, fetchData } = this.state
    const [ res ] = fetchData || []

    return <div>{res && res.data.map(item => {
        return <div key={item.id}>{item.name}</div>
      })}</div>
  }
}

CSS 过滤

我们在写组件的时候大部分都会导入相关的 css 文件，但是 css 文件无法在服务端执行，所以我们需要在服务端渲染的时候将导入的 css 文件去除掉

动态路由

在 SPA 模式下，大部分应用都会实现组件分包和按需加载，为了防止所有代码打包在一个文件，导致资源过大影响页面的加载和渲染。
在 SSR 下，我们限定按需的粒度是路由级别，请求不同的路由动态加载对应的组件。

如何实现组件的按需加载？

在 webpack 2 时期主要是用 require.ensure 方法来实现，在当下 webpack 4，有了更加规范的方式实现按需加载，那就是 import('xx.js')。

我们都知道 import 方法传入一个 js 文件地址，返回值是一个 promise 对象，然后再回调中得到按需的组件。它的原理其实就是通过 jsonp 的方式，动态请求脚本，然后在回调内得到组件。

import("../index").then((res) => {
    // xxx
});

所以我们得到了几个比较有用的信息：

如何加载脚本：import 结合 webpack 自动完成；
脚本是否加载完成：通过 then 方法回调进行处理；
获取异步按需组件：通过 then 方法回调获取。

// 使用 react-loadable
import React from "react";
import Loadable from "react-loadable";

// index.js
class Index extends React.Component {
    render() {
        return <div>index</div>;
    }
}

// detail.js
class Detail extends React.Component {
    render() {
        return <div>detail</div>;
    }
}

// route.js
// 按需加载 index 组件
const AsyncIndex = (props) => {
    return (
        <Async load={() => import("../index")}>{(C) => <C {...props} />}</Async>
    );
};

// 按需加载 detail 组件
const AsyncDetail = (props) => {
    return (
        <Async load={() => import("../detail")}>{(C) => <C {...props} />}</Async>
    );
};

const routes = [
    {
        path: "/",
        exact: true,
        component: AsyncIndex,
    },
    {
        path: "/detail",
        exact: true,
        component: AsyncDetail,
    },
];

按照这种方式进行配置，会发现 ssr 无效了。

动态路由 SSR 双端配置

ssr 无效的原因：

因为我们做路由同构的时候，双端使用的是同一个 route 配置文件 routes-config.js，现在组件修改成了按需加载，所以在路由查找后得到的组件发生了改变，AsyncDetail 和 AsyncIndex 无法转换出组件内容。

ssr 模式下服务端如何处理路由按需加载

参考客户端的处理方式，对路由配置二次处理，服务端在组件查找前强制指向 import 方法，得到一个全新的静态路由表，然后再去查找组件。

import routes from 'routes-config.js'

export async function getStaticRoutes() {
  const staticRoutes = []

    for(const route of routes) {
    staticRoutes.push({
      ...route,
      {
      component: (await item.component().props.load()).default
    }
    })
  }
  return staticRoutes
}

ssr 模式下客户端如何处理路由按需加载

完成服务端配置后，浏览器会一直显示加载中，这是因为双端节点对比失败，重新渲染。

解决办法

等待按需组件加载完成后再进行渲染。

如何按需

参考服务端设置，不过不转换成静态路由表，只需要找到按需加载组件完成动态加载即可。

为什么要服务端渲染（ssr）

首屏等待​

SEO​

核心原理

React SSR

从 ejs 开始​

JSX 到字符串​

关键问题

双端路由如何维护？​

获取数据的方法和逻辑写在哪里？​

服务端 html 节点无法重用​

同构才是核心

路由同构​

数据同构（预取同构）​

渲染同构​

数据注水​

数据脱水​

CSS 过滤​