用途:为 Next.js App Router 页面选择并实现合适的渲染策略,依据数据新鲜度与扩展需求做决策。
主要能力:涵盖 SSG、SSR、ISR、Streaming 与 PPR 五种策略。SSG 为 App Router 默认,用 generateStaticParams 在构建时预渲染路由,并由 fetch 的 cache: 'force-cache' 触发。SSR 由 cookies()、headers() 或 fetch 的 cache: 'no-store' 触发,适合个性化或高新鲜度数据。ISR 在构建后更新静态内容,可用基于时间的 revalidate,或用 revalidatePath / revalidateTag 按需触发。Streaming 用 Suspense 包裹慢速异步组件,避免阻塞首屏加载,也可用 loading.tsx 做路由级骨架。PPR 通过 next.config.js 中 ppr: true 启用,在单次 HTTP 请求中组合静态外壳与动态区域。
工作流:先判断数据新鲜度,静态内容用 SSG,周期性更新用 ISR,个性化用 SSR;再配置 fetch;需要流式时用 Suspense 加 fallback;混合场景启用 PPR。
适用场景:按 SEO(SSG/ISR)、交互性(客户端)与个性化(SSR)权衡策略选择,并用 dynamicParams 控制未缓存路由的兜底行为。Edge Runtime 可用 runtime: 'edge' 在无需完整 Node.js API 时实现低延迟全球分布执行。
限制与反模式:page.tsx 中不要做根级 await,慢组件应放进 Suspense 以流式传输;静态内容不要用 SSR;初始渲染不要用 typeof window 等浏览器专属值,改用 mounted useEffect 模式以避免 hydration 错误。