Next.js 16 渲染策略

Next.js 16 的渲染策略SSG/ISR/SSR与动态渲染CSR的核心区别在于渲染地点服务器/浏览器、渲染时机构建时/请求时/浏览器加载后、数据实时性与 SEO 能力。下面从定义、机制、用法与场景逐一说明并附对比表。一、四种渲染策略核心定义1. SSGStatic Site Generation静态生成时机npm run build构建时一次性生成所有页面 HTML。环境服务器/构建机产物为静态 HTMLJSCSS可直接 CDN 分发。数据构建时获取部署后默认不变需重新构建更新。特点最快首屏TTFB50ms、SEO 完美、零服务器压力。适用博客、文档、官网、营销页内容不常变。App Router 默认无动态数据依赖时自动 SSG。// app/page.tsxSSG默认exportdefaultfunctionHome(){returnh1静态页面构建时生成/h1;}2. ISRIncremental Static Regeneration增量静态再生时机构建时生成 → 访问后后台定时/按需重新生成不阻塞用户。环境同 SSG静态 HTML 为主后台异步更新。数据准实时有更新窗口如 60 秒无需全量重构。特点SSG 速度SSR 实时性折中、SEO 优秀、CDN 友好。适用商品详情、新闻列表、内容站周期性更新。配置revalidate时间驱动或revalidatePath事件驱动。// app/posts/[slug]/page.tsxISRexportconstrevalidate60;// 60秒后后台再生exportdefaultasyncfunctionPost({params}){const{slug}params;constdataawaitfetch(/api/posts/${slug}).then(rr.json());returnarticle{data.content}/article;}3. SSRServer-Side Rendering服务端渲染时机每次用户请求时服务器实时渲染 HTML 并返回。环境服务器Node.js/Edge Runtime请求触发执行。数据实时最新每次请求拉取支持登录态/个性化。特点SEO 优秀、首屏直出、动态内容强但 TTFB 较慢100–500ms、服务器有压力。适用实时资讯、用户仪表盘、电商页强实时/个性化。配置dynamic: force-dynamic或无generateStaticParams。// app/dashboard/page.tsxSSRexportconstdynamicforce-dynamic;// 强制SSRexportdefaultasyncfunctionDashboard(){constuserawaitgetCurrentUser();// 每次请求获取当前用户returndiv欢迎{user.name}/div;}4. 动态渲染CSRClient-Side Rendering客户端渲染时机服务器返回空 HTML 壳浏览器加载 JS 后动态渲染。环境纯浏览器无服务器渲染参与。数据浏览器端fetch/axios拉取完全动态。特点交互最强、服务器零压力但首屏慢、SEO 差爬虫可能看不到内容。适用后台管理、强交互 SPA、用户中心无需 SEO。配置Next.js 中需手动禁用服务端渲染或用useEffect客户端取数。// app/admin/page.tsxCSRuse client;// 客户端组件import{useEffect,useState}fromreact;exportdefaultfunctionAdmin(){const[data,setData]useState(null);useEffect((){fetch(/api/admin).then(rr.json()).then(setData);},[]);returndiv{data?管理面板:加载中...}/div;}二、关键区别对比表维度SSGISRSSR动态渲染CSR渲染地点服务器构建时服务器构建后台服务器请求时浏览器渲染时机构建时一次性构建时定时/按需更新每次用户请求浏览器 JS 加载后数据实时性静态部署后不变准实时有更新窗口实时每次请求最新动态浏览器拉取首屏速度TTFB极快50ms极快50ms中等100–500ms慢依赖 JS 加载SEO 友好度✅ 完美✅ 优秀✅ 优秀❌ 较差服务器压力无CDN 分发低后台异步更新中高每次请求渲染无典型场景博客、官网、文档商品页、新闻列表实时资讯、仪表盘后台管理、SPA三、Next.js 16 关键增强App RouterServer Components默认组件默认在服务端运行零客户端 JS直接查数据库/文件系统进一步提升 SSG/ISR/SSR 性能。Streaming流式渲染SSR/ISR 支持分块发送 HTML浏览器边收边渲染首屏更快React 18。PPRPartial Prerendering部分预渲染静态部分预渲染动态部分流式加载SSG 速度SSR 动态性的极致折中Next.js 16 稳定。四、如何选择内容稳定、重 SEO/首屏→SSG首选周期性更新、兼顾速度与实时→ISR次选强实时/个性化、登录态→SSR强交互、无 SEO 需求→动态渲染CSR