搭建渲染服务器

基于Express的渲染服务器

renderToString

React提供了两个方法 renderToString 和 renderToStaticMarkup 用来将组件(Virtual DOM)输出成HTML字符串，这是React服务器端渲染的基础，它移除了服务器端对于浏览器环境的依赖，所以让服务器端渲染变成了一件有吸引力的事情。这两个方法被包含在了react-dom仓库中，可以通过如下方式引入与使用：

import ReactDOMServer from "react-dom/server";

var ReactDOMServer = require("react-dom/server");

ReactDOMServer.renderToString(element);

我们可以在服务端即使用renderToString将组件转化为HTML标签然后传递给客户端，这里React会自动为标签进行校验和计算；这样我们在客户端调用 ReactDOM.render() 渲染某个组件时，如果React发现已经存在了服务端渲染好的标签，则会直接使用这些标签来节约渲染时间。ReactDOMServer中提供的另一个渲染函数是renderToStaticMarkup，其很类似于renderToString，不过其忽略了额外的譬如data-reactid这样的React内部使用的非HTML标准属性；如果你只想把React作为简单的静态网页生成器，那么推荐使用这种方式，会帮你避免额外的带宽消耗。

服务器端渲染除了要解决对浏览器环境的依赖，还要解决两个问题：

前后端可以共享状态
前后端路由可以统一处理

状态传递

路由权限控制

import { renderToString } from "react-dom/server";
import { match, RouterContext } from "react-router";
import routes from "./routes";

serve((req, res) => {
  // Note that req.url here should be the full URL path from
  // the original request, including the query string.
  match(
    { routes, location: req.url },
    (error, redirectLocation, renderProps) => {
      if (error) {
        res.status(500).send(error.message);
      } else if (redirectLocation) {
        res.redirect(302, redirectLocation.pathname + redirectLocation.search);
      } else if (renderProps) {
        // You can also check renderProps.components or renderProps.routes for
        // your "not found" component or route respectively, and send a 404 as
        // below, if you're using a catch-all route.
        res
          .status(200)
          .send(renderToString(<RouterContext {...renderProps} />));
      } else {
        res.status(404).send("Not found");
      }
    }
  );
});

基于Next.js快速搭建渲染服务器

最近更新于0001-01-01