是否可以使用 Express 和 React 预渲染服务器端代码？答案

【问题标题】：Is it possible to pre render server side code with Express and React?是否可以使用 Express 和 React 预渲染服务器端代码？
【发布时间】：2016-06-02 22:23:26
【问题描述】：

我有一个简单的 Pokedex 网站，所以都是静态内容。

为了学习一些新东西，我使用 React、Express、Node 和 Redis 构建了它。页面呈现在服务器端。 Express 获取 slug，从 Redis 获取数据并将其传递给 React。

React 在我的构建中基本上是一种美化的模板语言，我知道它并不是 React 的最佳用途，因为我无法使用状态等。

是否可以像请求 url 一样遍历所有 pokemon 并将输出的 HTML 保存为它自己的页面？

这将使页面加载速度更快，同时也最大限度地减少服务器必须执行的工作量，从而节省资金和负载。这也是不必要的，因为皮卡丘页面总是相同的，所有其他 mons 也是如此。我知道我可能以错误的方式构建了这个，但我很好奇这是否可能。

【问题讨论】：

标签： javascript node.js express reactjs

【解决方案1】：

是的。这可以通过调用ReactDOMServer.renderToStaticMarkup：

类似于 renderToString，除了它不会创建 React 内部使用的额外 DOM 属性，例如 data-react-id。如果您想将 React 用作简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省大量字节。

您将使用如下代码：

var React = require('react');
var ReactDOMServer = require('react-dom/server');
var Component = require('./MyComponent');

var output = ReactDOMServer.renderToStaticMarkup(
  React.createElement(
    Component, {
      prop1: 'value'
    }
  )
);

或者如果你使用 JSX：

var React = require('react');
var ReactDOMServer = require('react-dom/server');
var Component = require('./MyComponent');

var output = ReactDOMServer.renderToStaticMarkup(
  <Component prop1="value" />
);

（请注意，这只是示例代码，旨在演示如何调用renderToStaticMarkup 方法）。

【讨论】：

太好了，谢谢！出于兴趣，您会推荐这种方法还是缓存代理？