在进行服务器端渲染时，我可以向客户端发送React组件吗

Can I send a React component to the client while doing Server Side Rendering?

本文关键字：客户端 可以向 React 组件 我可以 服务器端      更新时间：2023-09-26

我有一个在Node/Express服务器上构建的Reactjs应用程序。我正在通过以下方式进行服务器端渲染：

route.js

var Group = require('./react/component/groups');
var props = {foo: 'bar'};
var groupHtml = React.renderToString(Group(props));
  res.render('index.ejs', {
    reactOutput: groupHtml,
    jsonProps: JSON.stringify(props),
    start: 'lessonlist'
  });

index.ejs

<div id="react-main-mount"><%- reactOutput %></div>
<script id="props" type="application/json"><%- jsonProps %></script>
<script src="/js/<%= start %>.js"></script>

这真的很棒！但我的问题是：我的一个页面/组件将有一个子组件。但是这个子组件可以是50多个不同组件中的一个。

我想我可以要求每一个组件，即使只使用一个。这似乎是个坏主意，因为我的main.js文件会很大。

我试着通过一个道具和JSON.stringify发送它。这在服务器上可以渲染为HTML，但在客户端不起作用，因为JSON.sStringify无法字符串化react组件。

我想我也许可以做一个API调用并返回它，但和上面的问题一样。

有没有任何方法可以动态地要求一些东西，比如在我浏览/重新验证后，基于require（'components/'+this.props.foo）这样的变量？

任何建议/答案都将不胜感激

Browserify对我来说一直太庞大了，所以我做了研究，找到了RequireJS。它允许我在客户端上要求其他文件，就像Node做的那样。

我很难开始使用Require，但一旦我开始使用它，一切似乎都变得更容易了。请看我在CoffeeScript中写的这个例子。

请记住，在每个同构组件的顶部都有以下代码，这样您就不会偶然发现Node不理解关键字define的问题。

if typeof define != 'function'
  define = require('amdefine')(module)
define (require) ->

上面的代码是用coffeescript写的。

如果需要更多信息，请告诉我。

Webpack允许您进行异步捆绑加载。这适用于单页应用程序，在用户真正导航到需要它们的"页面"之前，您不希望包含所有javascript文件。这允许您使用ajax动态获取javascript。查看标题为9的部分。异步加载在此精彩的Webpack 指南中

实现看起来像这样。。。

if (window.location.pathname === '/feed') {
 showLoadingState();
 require.ensure([], function() { // this syntax is weird but it works
   hideLoadingState();
    require('./feed').show(); // when this function is called, the module is guaranteed to be synchronously available.
  });
} else if (window.location.pathname === '/profile') {
  showLoadingState();
  require.ensure([], function() {
    hideLoadingState();
    require('./profile').show();
  });
}

如果您不想使用Webpack，您可能只需要将ajax组件作为纯文本获取，并在到达时对其进行评估。这基本上就是浏览器在后台使用脚本标记所做的。

相关文章：