GX博客

页面在服务器端渲染可以提高初次加载体验，同时让搜索引擎可以抓取你的页面便于实现 SEO 优化。ReactDOMServer 为我们提供了两个方法来实现 React 组件的服务器端渲染。

首先我们需要先引入 ReactDOMServer 的方法。

const {renderToString, renderToStaticMarkup} = require("react-dom/server");

renderToString 方法可以把一个 React 元素渲染为原始的 HTML。当这些节点到达客户端后，再调用 ReactDOM.render() 方法，则 React 会保留这些已有服务器端渲染标记的节点，仅作绑定事件处理。这时候页面正式由客户端接管。

这里会引申出一个问题，就是你需要确保自己的 React 组件代码能在客户端和服务器端复用。我们可以借助前端打包工具 webpack 和 JavaScript 编译器 Babel 等解决这个问题。

renderToString(ReactElement);

renderToStaticMarkup 方法则是把一个React元素渲染为不包含 React 内部使用属性（如 data-reactroot、data-reactid）的原始HTML。当页面内容不需要由客户端 React 接管时，比如简单的静态页面，可以使用该方法，减少不必要的字节。

renderToStaticMarkup(ReactElement);

当服务器端通过 renderToString 渲染后，客户端使用 hydrate 代替 render，React 会尝试为已有标签添加事件监听。

import {hydrate} from "react-dom";

React 组件的服务器端渲染方法只能渲染 body 标签里的内容。在 koa 框架下，我们往往需要结合如 handlebars 这样的模板引擎对页面进行模板化和合理分区等。