Hey Guys, 之前写过一篇React + Koa 服务端渲染SSR的文章，都是大半年前的事了?，最近回顾了一下，发现有些之前主流的懒加载组件的库已经过时了，然后关于SSR似乎之前的文章没有涉及到React-v16的功能，特别是v16新加的stream API，只是在上一篇文章的末尾提了一下，所以在这篇Part 2的版本中会添加这些新功能?
Why use [Part II]?: Go to play
The Last of Usand wait forThe Last of Us Part II?
?主要内容:
- ✂️替换
react-loadable,使用loadable-components - ?使用
loadable-components来实现浏览器端和服务端的异步组件功能 - ?使用 react stream API 实现服务端渲染
- ?为服务端渲染的内容（html）添加缓存机制, 适用于同步和stream API
✂️ 替换 react-loadable
react-loadable已经好久没维护了，而且跟最新的webpack4+，还有babel7+都不兼容，还会有Deprecation Warning，如果你使用koa-web-kitv2.8及之前的版本的话，webpack build的时候会出现warning，而且可能还有一些潜在未知的坑在里面，所以我们第一件要做的事就是把它替换成别的库，而且要跟最新的React.lazy|React Suspense这类API完美兼容，loadable-components是个官方推荐的库, 如果我们既想在客户端懒加载组件，又想实现SSR的话（React.lazy暂不支持SSR）.
首先我们安装需要的库:
# For `dependencies`:
npm i @loadable/component @loadable/server
# For `devDependencies`:
npm i -D @loadable/babel-plugin @loadable/webpack-plugin
复制代码然后你可以在对应的webpack配置文件及babel配置文件里把react-loadable/webpack 和 react-loadable/babel移除掉，替换成@loadable/webpack-plugin 和 @loadable/babel-plugin。 然后下一步我们需要对我们的懒加载的组件做一些修改。
?使用 loadable-components 来实现浏览器端和服务端的异步组件功能
在一个需要懒加载 React 组件的地方:
// import Loadable from 'react-loadable';
import loadable from '@loadable/component';
const Loading = <h3>Loading...h3>;
const HelloAsyncLoadable = loadable(
() => import('components/Hello'),
{ fallback: Loading, }
);
//简单使用
export default MyComponent() {
return (
<div>
<HelloAsyncLoadable />
div>
)
}
//配合 react-router 使用
export default MyComponent() {
return (
)
}
复制代码其实跟之前react-loadable的使用方式差不多，传一个callback进去，返回动态import，也可以选择性的传入loading时需要显示的组件。
然后我们需要在入口文件中hydrate服务端渲染出来的内容，在src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { loadableReady } from '@loadable/component';
import App from './App';
loadableReady(() => {
ReactDOM.hydrate(
<App />,
document.getElementById('app')
);
});
复制代码OK, 上面这个基本就是客户端需要做的修改，下一步我们需要对服务端的代码做修改，来使得loadable-components能完美的运行在SSR的环境中。
在之前使用react-loadable的时候，我们需要在服务端调用Loadable.preloadAll()来预先加载所有异步的组件，因为在服务端没必要实时异步加载组件，初始化的时候就可以全部加载进来，但是在使用loadable-components的时候已经不需要了，所以直接删掉这个方法的调用。然后在我们的服务端的webpack入口文件中：
import path from 'path';
import { StaticRouter } from 'react-router-dom';
import ReactDOMServer from 'react-dom/server';
import { ChunkExtractor } from '@loadable/server';
import AppRoutes from 'src/AppRoutes';
//...可能还一下其他的库
function render(url, initialData = {}) {
const extractor = new ChunkExtractor({ statsFile: path.resolve('../dist/loadable-stats.json') });
const jsx = extractor.collectChunks(
);
const html = ReactDOMServer.renderToString(jsx);
const renderedScriptTags = extractor.getScriptTags();
const renderedLinkTags = extractor.getLinkTags();
const renderedStyleTags = extractor.getStyleTags();
return `
React App
${renderedLinkTags}
${renderedStyleTags}
${html}
${renderedScriptTags}
`;
}
复制代码其实就是renderToString附近那块做一些修改，根据新的库换了一些写法，对于同步渲染基本上就OK了?。
? 服务端渲染使用 React Stream API
React v16+中，React团队添加了一个Stream APIrenderToNodeStream来提升渲染大型React App的性能，由于JS的单线程特点，频繁同步的调用renderToString会柱塞event loop，使得其他的http请求/任务会等待很长时间，很影响性能，所以接下来我们使用流API来提升渲染的性能。
以一个koa route作为例子：
router.get('/index', async ctx => {
//防止koa自动处理response, 我们要直接把react stream pipe到ctx.res
ctx.respond = false;
//见下面render方法
const {htmlStream, extractor} = render(ctx.url);
const before = `
${extractor.getStyleTags()}
`;
//先往res里html 头部信息，包括div容器的一半
ctx.res.write(before);
//把react放回的stream pipe进res, 并且传入`end:false`关闭流的自动关闭，因为我们还有下面一半的html没有写进去
htmlStream.pipe(
ctx.res,
{ end: false }
);
//监听react stream的结束，然后把后面剩下的html写进html document
htmlStream.on('end', () => {
const after = `
${extractor.getScriptTags()}
`;
ctx.res.write(after);
//全部写完后，结束掉http response
ctx.res.end();
});
});
function render(url){
//...
//替换renderToString 为 renderToNodeStream，返回一个ReadableStream，其他都差不多
const htmlStream = ReactDOMServer.renderToNodeStream(jsx);
return {
htmlStream,
extractor,
}
//...
}
复制代码上面的代码加了注释说明每一行的功能，主要分为3个部分，我们先向response写入head相关的html, 然后把react返回的readableStream pipe到response， 监听react stream的结束，然后写入剩下一般的html, 然后手动调用res.end()结束repsonse stream，因为我们上面关闭了response stream 的自动关闭，所以这里要手动end掉，不然浏览器会一直处于pending状态。
使用Stream API OK后，我们还有一个在生产环境中常见的问题：对于每一个进来的请求，特别是一些静态页面，我们其实没必要都重新渲染一次App, 这样的话对于同步渲染和stream渲染都会或多或少产生影响，特别是当App很大的时候，所以为了解决这样的问题，我们需要在这中间加一层缓存，我们可以存到内存，文件，或者数据库，取决于你项目的实际情况。
?为服务端渲染添加缓存机制, 适用于同步和stream API
如果我们使用renderToString的话其实很简单，只需要拿到html后根据key（url或者其他的）存到某个地方就行了，但是对于Stream 渲染的话可能会有些tricky。因为我们把react的stream直接pipe到response了，这里我们使用了2种stream类型，ReadableStream(ReactDom.renderToNodeStream)和WritableStream(ctx.res)，但其实node里还有其他的stream类型，其中的TransformStream类型就可以帮我们解决上面stream的问题，我们可以在把react的readableStream pipe到TransformStream，然后这个TransformStream再pipe到res, 在transform的过程中（其实这里我们没有修改任何数据，只是为了拿到所有的html），我们就可以拿到所有react渲染出来的内容了，然后在transform结束时把所有拿到的chunk组合起来就是完整的html, 再像同步渲染的方式一样缓存起来就搞定了?
OK,不扯淡了, 直接上代码:
const { Transform } = require('stream');
//这里简单用Map作为缓存的地方
const cache = new Map();
//临时的数组用来把react stream每次拿到的数据块存起来
const bufferedChunks = [];
//创建一个transform Stream来获取所有的chunk
const cacheStream = new Transform({
//每次从react stream拿到数据后，会调用此方法，存到bufferedChunks里面，然后原封不动的扔给res
transform(data, enc, cb) {
bufferedChunks.push(data);
cb(null, data);
},
//等全部结束后会调用flush
flush(cb) {
//把bufferedChunks组合起来，转成html字符串，set到cache中
cache.set(key, Buffer.concat(bufferedChunks).toString() );
cb();
},
});
复制代码可以把上面的代码封装成一个方法，以便每次请求进来方便调用，然后我们在使用的时候:
//假设上面的代码已经封装到createCacheStream方法里了，key可以为当前的url，或者其他的
const cacheStream = createCacheStream(key);
//cacheStream现在会pipe到res
cacheStream.pipe(
res,
{ end: false }
);
//这里只显示部分html
const before = ` ...`;
//现在是往cacheStream里直接写html
cacheStream.write(before);
// res.write(before);
//react stream pipe到cacheStream
htmlStream.pipe(
cacheStream,
{ end: false }
);
//同上监听react渲染结束
htmlStream.on('end', () => {
const after = `