NextJS上的SSR是如何工作的



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

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

此外,当我尝试console.logwindow对象时,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。如果不使用服务器端渲染方法(例如,GetStaticPropsGetServerSideProps(,则它在构建时仅生成.html(自动静态优化(。

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

相关内容

  • 没有找到相关文章

最新更新