Skip to content

Next.js 渲染基础(CSR/SSR/SSG) ​

三种渲染方式 ​

CSRSSRSSG
渲染位置浏览器服务器构建时
首屏速度慢快最快
SEO差好好
数据新鲜度实时实时构建时固定
Next.js 用法'use client'默认(服务端组件)generateStaticParams

Hydration ​

服务端渲染的 HTML 到达浏览器后,React 会"注水"(hydration)让静态页面变成可交互的。如果前后端渲染不一致,会出现 Hydration Error。

Next.js 默认行为 ​

  • 默认 SSR(服务端组件)
  • 加 'use client' → 组件变成 CSR
  • generateStaticParams → 编译时生成静态页面 → SSG