Question

我在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文件将是巨大的。

我尝试通过prop和JSON.stringify发送它。这适用于服务器呈现为HTML，但这不适用于客户端，因为JSON.stringify无法对反应组件进行字符串化。

虽然我可能能够进行API调用并将其返回，但问题与上述相同。

有没有办法动态要求一些东西，比如基于变量如require（'components /'+ this.props.foo）我已经浏览/重新设置？

非常感谢任何建议/答案

Answer 1

Browserify对我来说总是太笨重，所以我做了我的研究并找到RequireJS。它允许我在客户端上需要其他文件，就像Node一样。

我很难开始使用Require，但是一旦我开始工作，一切看起来都比较容易。请参阅我在CoffeeScript中写的example。

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

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

define (require) ->

上面的代码是用coffeescript编写的。

如果需要更多信息，请与我们联系。

Answer 2

Webpack允许您进行异步捆绑加载。这适用于单页应用程序，您不希望必须包含所有javascript文件，直到用户实际导航到需要它们的“页面”。这允许您动态地使用ajax获取javascript。查看标题为 9的部分。此wonderful guide to 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作为纯文本并在到达时eval获取组件。这基本上就是浏览器在脚本标签下所做的事情。

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

2 个答案: