Question

当我做反应的SSR时，将如何构建将发送给客户端的内容？

是否等待异步操作完成？
是否等待状态树中所有组件的某种方式是否稳定？
是否会在某些生命周期方法中等待异步代码，例如用componentWillMount() ...代码修饰的await/async？
如果我将一些异步代码包装到Promise中并调用setState它的回调 - 是否会考虑这种变化？

Answer 1

它将是一个简单的html字符串，来自：

ReactDOMServer.renderToString(element)

并将在浏览器上呈现。休息所有js包，从html加载将在加载时超过你的应用程序。这是常规反应包：

<script src="/react-bundle.js"></script>

因此，呈现html的服务器将是这样的：

<html>
<head>
  ...
</head>
<body>
  <div id="root">
     // your server rendered html string shows up here
  </div>
  <script src="/react-bundle.js"></script>
</body>
</html>

Promise和异步代码不会成为这个渲染的html的一部分，但如果你需要添加它，这将需要一些额外的技巧。 componentWillMount中的代码将被执行并包含在服务器呈现的字符串中，但是在组件安装之后触发的方法（如componentDidMount）不会对服务器呈现的字符串产生影响。

SSR React应用程序和异步代码执行的渲染过程

1 个答案: