NextJS 上的 s-s-r 是如何工作的？

Posted 2023-04-14

【中文标题】NextJS 上的 s-s-r 是如何工作的？

【英文标题】：How does s-s-r on NextJS really works?

【发布时间】：2021-07-31 07:09:25

【问题描述】：

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

我在一些组件return 方法中放置了一个console.log，我看到这些是在客户端执行的。这些不应该显示在服务器的控制台上，因为正在使用 s-s-r 吗？

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

【问题讨论】：

您之前的任何问题都没有选择答案。请务必检查过去的问题并单击对您帮助最大的答案旁边的空白复选标记，以帮助其他人找到它并给人们虚假的互联网积分。

【参考方案1】：

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

Next 有一些功能可以控制组件何时仅可用于客户端或服务器，例如dynamic imports。

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

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

【讨论】：

但是当执行导航时，NextJS 解释说它使用getServerSideProps 获取页面数据。这将返回一个 JSON，该 JSON 将用于重新呈现页面。但是这个重新渲染是在客户端完成的，而不是服务器端。所以，这部分似乎没有涉及任何s-s-r。

但是鉴于 s-s-r 组件仅作为 html 发送，Nextjs 如何管理具有需要在状态更改时重新渲染的状态的动态组件？

【参考方案2】：

如果是GetServerSideProps，服务器端nextjs 会在你的.next 目录中生成.js。如果是 ISR (GetStaticProps + revalidate)，那么它会在该页面的 .next 目录中生成 .html、.json 和 .js 文件（如果是动态页面，则为这些页面）。如果使用GetStaticProps sans revalidate，它会在.next 目录中生成.html 和.json。如果不使用服务器端渲染方法（例如，GetStaticProps 或 GetServerSideProps），那么它只会在构建时生成 .html（自动静态优化）。

还有更多内容，但这是我在检查 .next 目录中的输出页面内容时注意到的