Agent skill

Next.js Rendering Strategies

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

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/rendering

Metadata

Additional technical details for this skill

labels
nextjs rendering isr ssr ssg
triggers 
{
    "files": [
        "**/page.tsx",
        "**/layout.tsx"
    ],
    "keywords": [
        "generateStaticParams",
        "dynamic",
        "dynamicParams",
        "PPR",
        "streaming"
    ]
}

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results