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
Decision gist · record as of 2026-07-24
nextjs-ppr-patterns teaches you to build Next.js 16 pages with static shells and dynamic streaming using Partial Prerendering. 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.
Use it when
- nextjs-ppr-patterns explains that Suspense boundaries define where dynamic content streams into your static shell.
- nextjs-ppr-patterns covers caching with 'use cache', cacheLife, cacheTag.
Verify before relying
Read SKILL.md below before installing (27 files). Open directory: indexed for reading, not audited.
Install
pproenca/dot-skills/nextjs-ppr-patterns · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn how to implement Partial Prerendering in Next.js 16 with static shells and dynamic streaming”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Next Cache Components enable Partial Prerendering in Next.js 16, letting you combine prerendered static content, cached async data, and fresh dynamic sections in a single route. The `use cache` directive marks functions for caching with configurable lifetimes via `cacheLife()`, while `cacheTag()` and `updateTag()` handle invalidation. Replaces the older `experimental.ppr` flag and `unstable_cache()` API.
Cache Components guides you through Next.js's compositional caching model, replacing segment-level configuration with granular, code-based cache control. Learn to apply the 'use cache' directive, manage cache lifetimes with cacheLife(), tag data for invalidation with cacheTag(), and architect static shells mixed with cached and dynamic content for optimal performance.
Cache Components guides you through Next.js's compositional caching model for Server Components, replacing segment-level configuration with granular, code-based control. Learn when to apply 'use cache', configure cache lifetimes and tags, invalidate stale data, and balance static shells with dynamic streaming content for optimal performance.
Master Next.js 16's App Router with patterns for Server Components, Server Actions, and the new "use cache" directive. This skill covers critical breaking changes—async params, proxy.ts migration, and required default.js in parallel routes—plus caching APIs and React 19.2 features to optimize performance and prevent common errors.
This skill covers React Server Components patterns for Next.js 16+ applications, including App Router setup, component boundary design, and data fetching with the new cache components API. Learn Server Actions for mutations, streaming with Suspense, and React 19 patterns for building performant server-first apps. Includes migration guidance, best practices, and reference templates.
Structure caching from the start in Next.js 16+ App Router projects by building a tag registry, revalidation utilities, and data-fetching functions with "use cache" directives. This skill guides you through placing cache logic on data functions rather than pages, wiring mutations to invalidation, and organizing Suspense boundaries for partial prerendering. Includes templates for tags, revalidation handlers, and patterns for personalized content near cache boundaries.
More skills Nextjs16 Skills (unlicensed)