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

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

javascript node.js express reactjs

Javascript react.js-服务器端呈现和路由策略,javascript,node.js,express,render,reactjs,Javascript,Node.js,Express,Render,Reactjs,我目前正在启动第一个带有服务器端渲染的React应用程序。问题是我想选择最可靠的策略我目前正在尝试做的是：使用Swig作为Express app的模板引擎，并插入字符串化的React组件（如模板变量）： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title</title> </head&g

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

我目前正在尝试做的是：

使用Swig作为Express app的模板引擎，并插入字符串化的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>
```
这在服务器上呈现得非常完美，但客户端不知道我有
```
name
```
prop
客户端
```
var React = require('react');
var Box = require('./components/Box.jsx');

React.render(<Box />, document.getElementById('react-mount'));
```
```
var React=require（'React'）；
var-Box=require（'./components/Box.jsx'）；
React.render（，document.getElementById（'React-mount'）；
```
这会从React向我抛出一个警告，并在没有
```
name
```
的情况下重新启动页面

这里的另一个问题是路线。。我假设，当请求某些路由时，最好在服务器上呈现应用程序，但当用户通过应用程序时，我更愿意更改客户端位置
这是否意味着应该在客户端和服务器上复制路由

那么，根据您的经验，在服务器上呈现React组件的最佳策略是什么呢？要正确地将服务器呈现的组件“升级”到客户端管理的组件（例如，在没有警告的情况下），您需要在客户端上装载与在服务器上呈现相同的组件，并传递相同的道具。如果道具可以是动态的，那么您还需要将道具从服务器发送到客户机，例如，将它们序列化为JSON，然后在组件装载之前在客户机上读取它们

一个好的React路由解决方案（这是一个很好的选择）将允许您根据URL和查询参数以声明方式设置路由，从而使您无需自己管理和序列化该数据。从react router文档中。
我是否需要客户端
```
bundle.js
```
和服务器代码中的重复路由？@Kosmetika项目（如react router）允许您使用react组件定义路由；在服务器上，您可以使用一个只将组件呈现为字符串的全包路由，如我链接的示例（
```
app.use
```
使React路由器针对每个请求运行）。是的，谢谢！不过还有一个问题。。由于我的组件使用JSON API以使数据处于其
```
状态
```
的服务器呈现不会给我带来好处，除非我找出在服务器上获取此数据的最佳方法并避免重复功能。。
```
var React = require('react');
var Box = require('./components/Box.jsx');

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