状态在 React 服务器端渲染中是如何工作的？

Question

我正在看这个 video 并且想了解在第一个页面加载期间组件的状态是如何设置到组件的。组件是否已经构建并在服务器端设置状态，然后作为 HTML OR 发送到客户端组件是否在服务器端构建，作为 HTML 向下发送到客户端，然后 运行 bundle.js 获取数据？

在视频的 8 分钟左右，演讲者谈到了 window 状态需要设置并与 React 状态同步。那是什么？如果 window 已经在服务器端设置，为什么还需要有状态？是不是因为还没有设置，是从服务器单独下发的，客户端组件必须从window中抓取它？

Answer 1

在服务器渲染中使用 React 时，我们还必须在响应中发送应用程序的状态，以便客户端可以将其用作初始状态。这很重要，因为如果我们在生成 HTML 之前预加载任何数据，我们希望客户端也可以访问这些数据。否则，客户端生成的标记与服务器标记不匹配，客户端将不得不重新加载数据。

要将数据向下发送到客户端，我们需要：

• 为每个请求创建一个全新的 React 存储实例； 可选地派发一些动作； 把状态从商店里拉出来； 然后将状态传递给客户端。 在客户端，将使用服务器提供的状态创建并初始化一个新的 React 存储。

React 在服务器端的唯一工作是提供我们应用程序的初始状态。