react服务端渲染

单页应用存在的问题

SEO不友好
首次请求时间较长，体验不好

服务端渲染和客户端渲染的区别

客户端渲染路线：

1. 请求html
2. 服务端返回html
3. 浏览器下载html里面的js/css文件
4. 等待js文件下载完成
5. 等待js加载并初始化完成
6. js代码可以运行后由js代码向后端请求数据( ajax/fetch )
7. 等待后端数据返回
8. react-dom( 客户端 )从无到完整地，把数据渲染为响应页面

服务端渲染路线：

1. 请求html
2. 服务端请求数据( 内网请求快 )
3. 服务器初始渲染（服务端性能好，较快）
4. 服务端返回已经有正确内容的页面
5. 客户端请求js/css文件
6. 等待js文件下载完成
7. 等待js加载并初始化完成
8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )

最简单的react服务端渲染(生产环境)

server-entry.js

import React from 'react';
import App from './src/containers/App';

export default <App />

这一段代码不能直接在服务端执行，需要另外打包。

webpack.server.conf.js

const serverWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  target: 'node',  // 打包出来的内容使用在node环境中
  entry: {
    app: path.join(__dirname, '../client/server-entry.js')
  },
  output: {
    path: config.build.assetsRoot,
    filename: 'server-entry.js',
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    libraryTarget: 'commonjs2' // 打包后的代码使用的模块方案
  },
  devtool: config.dev.devtool,
});

运行npm run ssr:server,打包文件。打包出来的server-entry.js文件以* module.exports 开头，这样代码可以在node环境中直接使用。

main.js

const Koa = require('koa');
const router = require('koa-router')();
const ReactSSR = require('react-dom/server');
const path = require('path');
const fs = require('fs');
const serve = require('koa-static');
const serverEntry = require('../dist/server-entry');

const app = new Koa();

const appString = ReactSSR.renderToString(serverEntry.default);
const template = fs.readFileSync(path.resolve(__dirname, '../dist/app.html'), 'utf-8');

app.use(serve(path.join(__dirname, '../dist')));

router.get('*', async (ctx) => {
  ctx.body = template.replace('<!-- app -->', appString);
});

app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3333, () => {
  console.log('server is listening at port 3333');
});

访问localhost:3333/ ---> 服务端返回内容如下

服务端返回

访问localhost:8080/ ---> 客户端返回内容如下

客户端返回.png

开发环境下的服务端渲染

服务端渲染涉及客户端的js以及服务端的bundle。webpack-dev-server不会在本地生成文件。需要通过其他方式获取template以及server bundle等内容。

1. 判断环境（process.env.NODE_ENV）
   通过cross-env实现
2. 获取template文件

// 获取模板文件
const getTemplate = () => {
  return axios.get('http://0.0.0.0:8080/public/app.html')
    .then((res) => res.data)
    .catch((err) => {
      console.log(err);
    });
};

3. server端的bundle是通过webpack.server.conf这个配置文件打包而来，如果改了client端的代码都是需要实时更新这个bundle文件的。可以通过启动webpack，读取webpack打包的结果获取这一部分内容。通过webpack和相应的配置生成一个compiler，compiler可以监听entry下依赖的文件是否有变化，一旦有变化就会重新打包。

/* 获取server bundle 部分代码*/
const webpack = require('webpack');
const MemoryFs = require('memory-fs');
const path = require('path');
const serverConfig = require('../../build/webpack.server.conf');

const NativeModule = require('module');
const vm = require('vm');

// 将string解析为一个模块
const getModuleFromString = (bundle, filename) => {
  const m = { exports: {} };
  // 模块包装器
  // 在执行模块代码之前，Node.js 会使用一个如下的函数包装器将其包装：
  // (function (exports, require, module, __filename, __dirname) {
  //   // 模块的代码实际上在这里, bundle code
  // });
  const wrapper = NativeModule.wrap(bundle);
  // vm.Script类型的实例包含若干预编译的脚本，这些脚本能够在特定的沙箱（或者上下文）中被运行。
  // 创建一个新的vm.Script对象只编译代码但不会执行它。编译过的vm.Script此后可以被多次执行
  const script = new vm.Script(wrapper, {
    filename,
    displayErrors: true,
  });
  const result = script.runInThisContext();
  result.call(m.exports, m.exports, require, m);
  return m;
}

const mfs = new MemoryFs();
const serverCompiler = webpack(serverConfig);
// 自定义文件系统
// 默认情况下，webpack 使用普通文件系统来读取文件并将文件写入磁盘。
// 但是，还可以使用不同类型的文件系统（内存(memory), webDAV 等）来更改输入或输出行为。
// 为了实现这一点，可以改变 inputFileSystem 或 outputFileSystem。
// 例如，可以使用 memory-fs 替换默认的 outputFileSystem，以将文件写入到内存中，而不是写入到磁盘。
serverCompiler.outputFileSystem = mfs;

// 调用 watch 方法会触发 webpack 执行器，但之后会监听变更（很像 CLI 命令: webpack--watch）
// 一旦 webpack 检测到文件变更，就会重新执行编译。该方法返回一个 Watching 实例。
let serverBundle;
// let createStoreMap;
serverCompiler.watch({}, (err, stats) => {
  // 可以通过stats获取到代码编译过程中的有用信息，包括：
  // 1. 错误和警告（如果有的话）
  // 2. 计时信息
  // 3. module 和 chunk 信息
  if (err) throw err;
  const info = stats.toJson();
  if (stats.hasErrors()) {
    console.log('错误');
    console.error(info.errors);
  }
  if (stats.hasWarnings()) {
    console.log('警告');
    console.warn(info.warnings);
  }

  const bundlePath = path.join(serverConfig.output.path, serverConfig.output.filename);
  // 从内存中读取server bundle
  // 读出的bundle是为string类型，并不是js中可以使用的模块
  const bundle = mfs.readFileSync(bundlePath, 'utf-8');
  // 使用这种方式打包的模块无法使用require模式
  const m = getModuleFromString(bundle, 'server-entry.js');
  serverBundle = m.exports;  
});

4. 获取template和server bundle后监听请求

const proxy = require('koa-proxies');
module.exports = (app, router) => {
  // 开发环境
  // webpack启动时获取template，然后返回给前端
  // webpack-dev-server 编译的文件存储在内存中
  // 获取server端的bundle文件，这个文件是由执行webpack.server.conf.js文件获取的，并且开发环境下每次改变文件需要重新编译

  // 代理转发
  app.use(proxy('/public', {
    target: 'http://0.0.0.0:8080'
  }));

  const template = getTemplate();
  template.then((res) => {
    router.get('*', async (ctx, next) => {
      if (!serverBundle) {
        ctx.body = 'waiting for compile';
        return;
      }
      await serverRender(ctx, next, serverBundle, res);
    });
  });
};

加入router和store后对服务端渲染的优化

1. 路由控制
   因为使用者可能从任意的路由进入网站，所以服务端也需要控制router的跳转。浏览器请求后，服务端渲染的内容要根据router中不同的路径映射返回不同的html内容。
2. stroe数据同步
   每个页面都有对应的数据，在服务端渲染时已经请求过对应数据，所以要让客户端知道这些数据，在客户端渲染的时候直接使用，而不是通过API再次请求，造成浪费。
3. 当路由中有redirect的情况时，服务端渲染时就要做好跳转
4. 服务端渲染时若需要异步数据，这时候需要react-async-bootstrapper
   这部分代码比较难描述，注释全都写在代码中了，详细请看
   https://github.com/Graceji/react-koa-SSR