我已经使用 NextJS 有一段时间了，但并没有完全了解它的 SSR 流程是如何工作的。
我在一些组件return 方法中放置了一个console.log，我看到这些是在客户端执行的。这些不应该显示在服务器的控制台上，因为正在使用 SSR 吗？
另外，当我尝试console.log window 对象时，NextJS 会抛出一个错误，指出 window 未定义。这让我更加困惑，因为根据我之前的测试，console.log 是在客户端运行，但根据这个错误，它是在服务器上运行。
【问题讨论】：
标签： reactjs next.js server-side-rendering vercel
如果您已将 React 组件设置为在服务器上呈现（对于非静态站点，您应该这样做），当代码在 NodeJS 中的服务器上执行时，没有窗口对象。那只存在于浏览器中。您需要在 SSR 组件中考虑到这一点。
Next 有一些功能可以控制组件何时仅可用于客户端或服务器，例如dynamic imports。
最后，在服务器上，Next 主要是在做renderToString，并从服务器提供 HTML，与任何其他提供 HTML 的网络服务器没有什么不同。
一旦进入客户端，React 就会“水合”渲染的 DOM，因为它会在服务器创建的 HTML 上重新运行 React。它不会更改 DOM，但会添加您为应用定义的交互性、点击处理程序等内容。
【讨论】：
getServerSideProps 获取页面数据。这将返回一个 JSON，该 JSON 将用于重新呈现页面。但是这个重新渲染是在客户端完成的，而不是服务器端。所以，这部分似乎没有涉及任何SSR。
如果是GetServerSideProps，服务器端nextjs 会在你的.next 目录中生成.js。如果是 ISR (GetStaticProps + revalidate)，那么它会在该页面的 .next 目录中生成 .html、.json 和 .js 文件（如果是动态页面，则为这些页面）。如果使用GetStaticProps sans revalidate，它会在.next 目录中生成.html 和.json。如果不使用服务器端渲染方法（例如，GetStaticProps 或 GetServerSideProps），那么它只会在构建时生成 .html（自动静态优化）。
还有更多内容，但这是我在检查 .next 目录中的输出页面内容时注意到的
【讨论】：