# Next.js Rendering Strategies

> SSG, SSR, ISR, Streaming, and Partial Prerendering (PPR).

- Skill: `majiayu000/next-js-rendering-strategies` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/next-js-rendering-strategies`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/next-js-rendering-strategies/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/next-js-rendering-strategies

---


# Rendering Strategies (App Router)

## **Priority: P0 (CRITICAL)**

Choose rendering strategy based on data freshness and scaling needs. See [Strategy Matrix](references/strategy-matrix.md).

## 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/SUSPENSE_BAILOUT.md).

## References

- [Strategy Selection Matrix](references/strategy-matrix.md)
- [Implementation Details](references/implementation-details.md)
- [Scaling Patterns](references/scaling-patterns.md)