Question

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

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

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

是否可以遍历所有的口袋妖怪，就好像我在请求网址并将输出的HTML保存为自己的页面一样？

它可以使页面加载更快，但也可以最大限度地减少服务器必须完成的工作量，从而节省资金和负载。它也是不必要的，因为皮卡丘页面总是相同的，就像所有其他的星团一样。我知道我可能已经构建了错误的方式，但如果可能的话，我很好奇。

Answer 1

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

来实现

与renderToString类似，但这不会创建额外的DOM属性，例如React在内部使用的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方法的示例代码）。

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

1 个答案: