react.js - 服务器端渲染和路由策略答案

【问题标题】：react.js - Server-side rendering and routes strategiesreact.js - 服务器端渲染和路由策略
【发布时间】：2015-03-10 12:52:09
【问题描述】：

我目前正在启动我的第一个带有服务器端渲染的 React 应用程序。问题是我想选择最可靠的策略。

我目前正在尝试做的事情：

使用 Swig 作为 Express 应用程序的模板引擎并插入字符串化的 React 组件，如模板变量：

<!doctype html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <title>Title</title>
  </head>
  <body>
     <div id="react-mount">{{reactHTML|safe}}</div>
     <script src="/build/bundle.js"></script>
  </body>
</html>

这是在服务器端和客户端都将 props 传递给组件的问题：

服务器

var Box = require('./src/components/Box.jsx');
function renderify (component, props) {
   var reactHTML = React.renderToString(React.createElement(component, props));
   return {reactHTML: reactHTML};
}

app.get('/', function (req, res) {
   res.render('layout', renderify(Box, {name: 'My Box'}));
});

这完美呈现在服务器上，但客户端不知道我有name prop..

客户

var React = require('react');
var Box = require('./components/Box.jsx');

React.render(<Box />, document.getElementById('react-mount'));

这会从 React 向我发出警告，并在没有 name 的情况下重新呈现页面。

这里的另一个问题是路由。我认为当请求某些路由时最好在服务器上呈现应用程序，但我更愿意在用户通过应用程序时更改客户端位置。

这是否意味着在客户端和服务器上都应该复制路由？

那么根据您的经验，在服务器上渲染 React 组件的最佳策略是什么？

【问题讨论】：

标签： javascript node.js express render reactjs

【解决方案1】：

要将服务器渲染的组件正确“升级”为客户端管理的组件（例如，没有警告），您需要在客户端安装与服务器渲染相同的组件，并传递相同的道具。如果道具可以是动态的，那么您还需要将道具从服务器获取到客户端，例如通过将它们序列化为 JSON，然后在组件挂载之前在客户端上读取它们。

一个好的 React 路由解决方案（react-router 是一个不错的选择）将允许您根据 URL 和查询参数以声明方式设置您的路由，这使您不必自己管理和序列化这些数据。 Here's a quick example 来自 react-router 文档。

【讨论】：

客户端bundle.js和服务器代码中是否需要重复路由？
@Kosmetika 像 react-router 这样的项目允许你使用 React 组件定义你的路由；在服务器上，您可以使用只将组件呈现为字符串的包罗万象的路由，就像我链接的示例中一样（app.use 使 React 路由器为每个请求运行）。
好的，谢谢！不过还有另一个问题.. 因为我的组件使用 JSON API 来在他们的state 的服务器渲染中获取数据不会给我带来好处，直到我弄清楚在服务器上获取这些数据的最佳方法是什么并避免重复功能..