Next.js中的一些问题

前言

Generating static pages 渲染两次

RSC 组件，构建阶段都会执行 两次组件渲染, 运行的时候，也会有差异：

  • next dev 只运行一次
  • next build 运行两次， 第一次是生成 RSC 组件 .rsc，后一次是生成页面 .html, 组件渲染在页面渲染之前触发。
  • page 文件，如果 use client 就渲染一次。做了SSG 的事情
  • page 文件，包含 RSC 组件， 组件也会被渲染两次。但 start 的时候。
  • next start 又分情况了，如果是没有 fetch 的情况，直接使用缓存页面了， 并且在 revalidate 之后，重新生成缓存文件。
  • 要控制页面的失效时间， 应该要小于组件， 不然页面维度一直会被缓存， 只要页面失效了，包含的组件也会被更新

具体一点

当我们使用 RSC 的时候， 构建阶段 Generating static pages 会执行两次。不管是 page 还是 component , 只要是 RSC 的， 就会执行两次。

在使用的情况， 如果组件有 fetch 请求， 会调用组件的代码两次， 和构建阶段一样。如果没有，则会调用缓存的静态资源，不走 js 代码。直到 revalidate 之后，重新生成缓存文件, 覆盖。

  • 所有请求，优先走 html 页面，如果页面含有 fetch, 则立马再调用 RSC 组件渲染
  • 静态的 RSC 组件，默认就走缓存了，不会触发组件渲染的 JS 代码, 但当 revalidate 之后，会重新调用组件渲染 JS 代码，覆盖缓存文件

相关 issues:

现象：

  • 组件中有 fetch 请求外部服务， 默认还是 static 的渲染方式
  • next build 的时候， Generating static pages 对 RSC 组件渲染了两次

服务端渲染和客户端不一致

Text content does not match server-rendered HTML | Next.js