Next.js Rendering Strategies

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

• Strategy Selection Matrix
• Implementation Details
• Scaling Patterns