AgentSkillsCN

Next.js Rendering Strategies

在 SSG、SSR、ISR、流式传输以及部分预渲染（PPR）方面采取最佳实践。

SKILL.md
--- frontmatter
name: Next.js Rendering Strategies
description: SSG, SSR, ISR, Streaming, and Partial Prerendering (PPR).
metadata:
  labels: [nextjs, rendering, isr, ssr, ssg]
  triggers:
    files: ['**/page.tsx', '**/layout.tsx']
    keywords: [generateStaticParams, dynamic, dynamicParams, PPR, streaming]

Rendering Strategies (App Router)

Priority: P0 (CRITICAL)

Choose rendering strategy based on data freshness and scaling needs. See Strategy Matrix.

Guidelines

  • •SSG (Default): Build-time render. Use generateStaticParams.
  • •SSR: Per-request render. Triggered by cookies(), headers(), or cache: 'no-store'.
  • •Streaming: Wrap slow components in <Suspense> to avoid blocking.
  • •ISR: Post-build updates. Use revalidate (time) or revalidatePath (on-demand).
  • •PPR: Static shell + dynamic holes. Experimental ppr config.
  • •Runtime: Node.js (Full) or Edge (Lighter/Faster).

Scaling & Hydration

  • •Static Shell: Render layout as static, personalize via Suspense.
  • •Error Boundaries: Use error.tsx with reset() to catch runtime errors.
  • •Hydration Safety: Avoid typeof window or Date.now() in initial render. Use useEffect.

Anti-Patterns

  • •No Root Awaits: Avoid waterfalls in page.tsx. Use Streaming.
  • •Bailouts: Understand Suspense Bailout Rules.

References