NextJS 上的 SSR 是如何工作的？

Question

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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