NextJS 上的 SSR 到底如何运作？

Question

我已经使用 NextJS 一段时间了，但并没有完全了解它的 SSR 流程到底是如何工作的。

console.log我在一些组件方法中放入了一个内部return方法，我看到这些方法是在客户端执行的。由于正在使用 SSR，这些内容不应该显示在服务器的控制台上吗？

另外，当我尝试console.log该window对象时，NextJS 会抛出一个错误，指出该对象window未定义。这让我更加困惑，因为根据我之前的测试，console.log是在客户端运行的，但根据这个错误，它是在服务器上运行的。

Answer 1

如果您已将 React 组件设置为在服务器上呈现（对于非静态站点，您应该这样做），则当代码在 NodeJS 中的服务器上执行时，不会有 window 对象。这只存在于浏览器中。您需要在 SSR 组件中考虑这一点。

Next 的一些功能可以控制组件何时仅可供客户端或服务器使用，例如动态导入。

最后，在服务器上，Next 主要是执行renderToString，并从服务器提供 HTML，与任何其他提供 HTML 的 Web 服务器没有什么不同。

一旦进入客户端，React 就会“水化”渲染的 DOM，就像它在服务器创建的 HTML 上重新运行 React 一样。它不会更改 DOM，但会添加您为应用程序定义的交互性、点击处理程序等内容。