我已经使用NextJS一段时间了,但还没有完全了解它的SSR过程是如何真正工作的。
我在一些组件return
方法中放入了一个console.log
,我看到这些都是在客户端执行的。这些不是应该显示在服务器的控制台上吗,因为正在使用SSR?
此外,当我尝试console.log
window
对象时,NextJS抛出一个错误,说window
没有定义。这让我更加困惑,因为根据我之前的测试,console.log
在客户端运行,但根据这个错误,它在服务器上运行。
如果你已经设置了React组件在服务器上渲染(对于非静态站点应该是这样(,当代码在NodeJS中的服务器上执行时,没有窗口对象。它只存在于浏览器中。您需要在SSR组件中说明这一点。
Next有一些功能可以控制组件何时仅对客户端或服务器可用,比如动态导入。
最后,在服务器上,Next主要执行renderToString,并从服务器上提供HTML,这与任何其他提供HTML的Web服务器没有什么不同。
一旦进入客户端,React";水合物";在服务器创建的HTML上重新运行React。它不会更改DOM,但它确实添加了您为应用程序定义的交互、单击处理程序等内容。
如果是GetServerSideProps
,服务器端nextjs会在.next目录中生成.js。如果它是ISR(GetStaticProps+重新验证(,那么它会在.next目录中为该页面生成.html、.json和.js文件(如果这些页面是动态的(。如果使用GetStaticProps
而不进行重新验证,则会在.next目录中生成.html和.json。如果不使用服务器端渲染方法(例如,GetStaticProps
或GetServerSideProps
(,则它在构建时仅生成.html(自动静态优化(。
它还有更多,但这是我在检查.next
目录中输出页面的内容时注意到的