Question

我目前正在使用服务器端渲染启动我的第一个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道具..

客户端

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

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

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

这里的另一个问题是路由..我认为在请求某个路由时在服务器上呈现应用程序会更好但是当用户通过应用程序时我更愿意让客户端位置发生变化..

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

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

Answer 1

正确＆＃34;升级＆＃34;将服务器呈现的组件放入客户端管理的组件中（例如，没有警告），您需要在服务器上呈现相同的组件，并将其传递给相同的道具。如果道具可以是动态的，那么您还需要从服务器获取道具到客户端，例如通过将它们序列化为JSON，然后在组件安装之前在客户端上读取它们。

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

react.js - 服务器端呈现和路由策略

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

1 个答案: