Next.js：如何检查组件是静态渲染还是动态渲染？

针对你遇到的情况，这里有几个可靠的方法来确认组件是静态渲染还是动态渲染：

• 查看构建日志
  运行next build命令，终端输出的日志会明确标记每个路由的渲染类型（比如Static SSG、Dynamic SSR）。如果组件属于静态路由的一部分，构建时就会完成渲染；动态组件所在的路由会被标记为动态，且不会在构建时生成静态内容。

• 添加日志或时间戳测试
  在目标组件（比如<SideNav>）中添加日志或时间戳输出：

  console.log('SideNav渲染时间:', new Date().toISOString());
  

  • 静态组件的日志只会在next build阶段出现，后续刷新页面不会重复输出，时间戳也固定为构建时的时间；
  • 动态组件的日志会在每次页面请求（刷新浏览器）时输出，时间戳会随每次刷新更新。

• 检查.next目录的静态文件
  静态渲染的组件内容会被打包到/.next/static目录下的对应文件中；动态渲染的组件不会生成这类静态文件，而是在服务器端实时生成内容。

• 利用React DevTools Profiler
  打开浏览器的React DevTools，切换到「Profiler」标签页后刷新页面：

  • 静态组件不会在每次刷新时触发重新渲染（除非自身状态/ props变化）；
  • 动态组件会在每次页面请求时重新渲染，Profiler会记录对应的渲染流程。

另外补充：在未开启PPR的Next.js v14中，noStore()的作用范围是调用它的组件及其子树，而非整个路由。如果<SideNav>没有调用noStore()，也没有依赖调用了noStore()的组件的动态数据，它依然会保持静态渲染状态，这是符合预期的。

内容的提问来源于stack exchange，提问作者Glenn Mohammad