nextjs-ppr-patterns
This skill covers 21 rules for implementing Partial Prerendering in Next.js 16 App Router, guiding you through enabling cacheComponents, placing Suspense boundaries, caching with 'use cache', handling runtime APIs, composing pages with parallel streaming, and building forms with mutations. Each rule corrects a specific misconception about the dynamic-by-default rendering model and shows the canonical approach for mixing static chrome with personalized or real-time content.
nextjs-ppr-patterns teaches you to build Next.js 16 pages with static shells and dynamic streaming using Partial Prerendering.
AI-generated summary based on this skill's SKILL.md
Install
pproenca/dot-skills/nextjs-ppr-patterns · repository language: Shell
git clone https://github.com/pproenca/dot-skills
cp -r dot-skills/skills/.experimental/nextjs-ppr-patterns ~/.claude/skills/nextjs-ppr-patternsnpx skillfed install pproenca/dot-skills/nextjs-ppr-patternsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are Next.js 16 partial prerendering patterns?
nextjs-ppr-patterns teaches 21 rules for implementing Partial Prerendering in Next.js 16 App Router. PPR lets you prerender a static shell at build time, then stream dynamic content into holes marked by Suspense boundaries. The skill guides you through enabling cacheComponents, placing Suspense correctly, using the 'use cache' directive, handling runtime APIs without forcing full dynamic rendering, and composing pages with parallel streaming to deliver fast initial HTML while personalizing or updating real-time data.
How do you use Suspense boundaries and 'use cache' directive for page composition?
nextjs-ppr-patterns explains that Suspense boundaries define where dynamic content streams into your static shell, while the 'use cache' directive marks server components for caching. Together they let you compose pages by wrapping expensive or personalized sections in Suspense, then using 'use cache' inside those boundaries to control what gets cached versus streamed. This approach keeps your static chrome fast while allowing selective real-time updates without forcing the entire page dynamic.
What caching strategies does nextjs-ppr-patterns cover?
nextjs-ppr-patterns covers caching with 'use cache', cacheLife, cacheTag, and updateTag directives to handle runtime APIs without forcing dynamic rendering. The skill shows how to apply these strategies to preserve Activity state, revalidate specific tagged data, and build forms and wizards that mutate without losing the benefits of prerendering. Each pattern corrects misconceptions about Next.js 16's dynamic-by-default model and demonstrates the canonical approach for mixing static and personalized content.
How do you enable PPR in Next.js and set up static shells with dynamic holes?
nextjs-ppr-patterns guides you through enabling cacheComponents in your Next.js 16 configuration, then architecting pages with a static shell and dynamic holes. You mark expensive or personalized sections with Suspense boundaries, which become the holes where dynamic content streams in. The skill includes empirical debugging techniques using build output and DevTools to verify your static/dynamic boundaries are correctly placed and performing as expected.
What's the difference between updateTag and revalidateTag in nextjs-ppr-patterns?
nextjs-ppr-patterns teaches that updateTag and revalidateTag serve different purposes in mutations and Activity state preservation. The skill shows how to use these directives when building forms and wizards to ensure mutations update the right cached data without forcing full page revalidation. Each pattern includes examples demonstrating when to apply each strategy to maintain performance while keeping your page composition predictable.
How does nextjs-ppr-patterns handle runtime APIs in prerendered pages?
nextjs-ppr-patterns shows how to use runtime APIs like connection() without forcing dynamic rendering by wrapping them in Suspense boundaries and applying caching directives. The skill explains how to compose pages so that non-deterministic operations stream into dynamic holes rather than breaking the static shell. This approach lets you safely use runtime APIs while preserving the performance benefits of Partial Prerendering in Next.js 16.
SKILL.md
rendered from the published skill — quoted content, verbatim
Next.js 16 Partial Prerendering Patterns
Partial Prerendering (PPR) for the Next.js 16 App Router under the Cache Components model — the decisions PPR forces and how to settle them, written so an agent applies them while writing or reviewing code. Contains **21 rules across 6
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
skills/.experimental/nextjs-ppr-patterns/AGENTS.md
skills/.experimental/nextjs-ppr-patterns/SKILL.md
skills/.experimental/nextjs-ppr-patterns/assets/templates/_template.md
skills/.experimental/nextjs-ppr-patterns/metadata.json
skills/.experimental/nextjs-ppr-patterns/references/_debug-boundaries.md
skills/.experimental/nextjs-ppr-patterns/references/_sections.md
skills/.experimental/nextjs-ppr-patterns/references/cache-in-memory-not-durable-serverless.md
skills/.experimental/nextjs-ppr-patterns/references/cache-keys-are-automatic.md
skills/.experimental/nextjs-ppr-patterns/references/cache-pass-runtime-values-as-props.md
skills/.experimental/nextjs-ppr-patterns/references/cache-pass-through-children-and-actions.md
skills/.experimental/nextjs-ppr-patterns/references/cache-set-lifetime-and-tags.md
skills/.experimental/nextjs-ppr-patterns/references/cache-use-cache-directive.md
skills/.experimental/nextjs-ppr-patterns/references/compose-do-not-opt-out-the-shell.md
skills/.experimental/nextjs-ppr-patterns/references/compose-parallel-holes.md
skills/.experimental/nextjs-ppr-patterns/references/compose-single-dynamic-hole.md