首页 文章

渲染组件服务器端的最佳方法是什么？ （没有客户端 - 服务器链接，仅在服务器上）

提问于
浏览 次
0

我想知道它是如何呈现服务器端的最佳方式（不在客户端上呈现）并处理来自异步查询的状态更改 .

理想示例：

  • 服务器获取生成HTML的请求

  • 服务器'requires'一个反应组件，传递一些道具

  • react组件在服务器中呈现，但它必须执行Ajax / Socket查询才能获得一些信息 . 事件已发送，响应将在稍后发布 .

  • react组件改变状态，改变输出

  • 生成的HMTL已准备就绪，并且具有最新的状态更改 .

这里发生的是 ReactDOM.renderToStaticMarkup() ，正如预期的那样，不等待组件完成状态更改（在这种情况下，等待数据并重新渲染） .

To clarify:

这里没有客户，这不是典型的SSR . 我只需要服务器上的完整HTML，以便稍后我可以做其他操作 . 这里的问题是如何等待我在客户端上使用的异步调用和 use the same component （它有状态和一些setStates） .

我只是假设只有这样才能拥有只接收道具的无状态组件（先前执行所有套接字处理并将数据传递给每个组件） . 现在组件是简单的React，没有涉及Redux（这就是为什么它们不是无状态的） .

还有其他想法/做法吗？

谢谢！

reactjs

1 回答

  • 1

    如果's no client involved, then whatever happens, you'll需要在渲染之前等待所有数据加载 .

    如果可能的话，我建议将所有异步工作移到组件树之外 . 然后将它传递给根组件，以便在调用render时分发给子组件（通过props） .

    createAsyncState(function(state) {
  // generate the markup for this component tree
  const markup = ReactDOMServer.renderToString(
    <Component state={state} />
  );

  // serve the markup to the client
  res.end(markup);
});

    如果您也想在客户端上使用相同的组件，那么您需要做的就是确保您的 createAsyncState 等效组件也适用于浏览器 .

    回复于

相关问题