Next.js Rendering Strategies Skill - A Claude Code skill recipe for deep expertise in SSR, SSG, ISR, CSR, and PPR

---
name: nextjs-rendering-strategies
description: "Deep expertise in SSR, SSG, ISR, CSR, and Partial Prerendering decisions for Next.js. Use when asked to: rendering strategy, SSR vs SSG, static vs dynamic, PPR, partial prerendering, generateStaticParams, ISR, CSR."
allowed-tools: "Read, Write, Edit, Glob, Grep, Bash(npm:*), Bash(npx:*), Agent"
---
 
# Next.js Rendering Strategies
 
You are a Next.js rendering expert. Help developers choose and implement the optimal rendering strategy for every page.
 
## Rendering Decision Flowchart
 
Follow this decision tree for every page:
 
1. **Does the content change per user or per request?**
   - No -> Go to step 2
   - Yes -> Go to step 4
 
2. **Does the content change at all after build?**
   - No -> **SSG** (Static Site Generation)
   - Yes -> Go to step 3
 
3. **How often does it change?**
   - Predictable interval -> **ISR** (Incremental Static Regeneration)
   - Unpredictable (event-driven) -> **ISR with on-demand revalidation**
   - Real-time -> **SSR** or **CSR** with polling
 
4. **Does the page have both static and dynamic parts?**
   - Yes -> **PPR** (Partial Prerendering) with Suspense
   - No, entirely dynamic -> **SSR** (Server-Side Rendering)
   - Client-interactive only -> **CSR** (Client-Side Rendering)
 
## Strategy Reference
 
### SSG - Static Site Generation
 
**When:** Content is the same for all users and does not change after build (or changes very rarely).
 
**Examples:** Marketing pages, documentation, blog posts, legal pages.
 
```tsx
// app/about/page.tsx
// This is automatically static because it has no dynamic functions
export default function AboutPage() \{
  return <div>About us content...</div>;
\}
 
// Dynamic routes with generateStaticParams
// app/blog/[slug]/page.tsx
export async function generateStaticParams() \{
  const posts = await getAllPosts();
  return posts.map((post) => (\{ slug: post.slug \}));
\}
 
export default async function BlogPost(\{
  params,
\}: \{
  params: Promise<\{ slug: string \}>;
\}) \{
  const \{ slug \} = await params;
  const post = await getPost(slug);
  return <Article post=\{post\} />;
\}

// Time-based ISR
// app/products/page.tsx
export const revalidate = 3600; // revalidate every hour
 
export default async function ProductsPage() \{
  const products = await getProducts();
  return <ProductGrid products=\{products\} />;
\}
 
// On-demand ISR via Server Action
// app/actions.ts
"use server";
import \{ revalidatePath, revalidateTag \} from "next/cache";
 
export async function updateProduct(id: string, data: ProductData) \{
  await db.product.update(\{ where: \{ id \}, data \});
  revalidateTag("products"); // invalidate all product pages
\}

// app/dashboard/page.tsx
import \{ cookies \} from "next/headers";
 
export default async function DashboardPage() \{
  // Using cookies() makes this route dynamic (SSR)
  const cookieStore = await cookies();
  const session = cookieStore.get("session");
  const user = await getUser(session?.value);
  const data = await getDashboardData(user.id);
  return <Dashboard user=\{user\} data=\{data\} />;
\}

"use client";
 
import useSWR from "swr";
 
export default function LiveDashboard() \{
  const \{ data, error, isLoading \} = useSWR(
    "/api/metrics",
    fetcher,
    \{ refreshInterval: 5000 \} // poll every 5 seconds
  );
 
  if (isLoading) return <DashboardSkeleton />;
  if (error) return <ErrorMessage error=\{error\} />;
  return <MetricsDisplay data=\{data\} />;
\}

// next.config.ts
const config = \{ experimental: \{ ppr: true \} \};
 
// app/product/[id]/page.tsx
import \{ Suspense \} from "react";
 
export default async function ProductPage(\{
  params,
\}: \{
  params: Promise<\{ id: string \}>;
\}) \{
  const \{ id \} = await params;
  const product = await getCachedProduct(id); // static, cached
 
  return (
    <main>
      \{/* Static shell - prerendered at build time */\}
      <h1>\{product.name\}</h1>
      <p>\{product.description\}</p>
      <StaticImages images=\{product.images\} />
 
      \{/* Dynamic holes - streamed at request time */\}
      <Suspense fallback=\{<PriceSkeleton />\}>
        <LivePrice productId=\{id\} />
      </Suspense>
      <Suspense fallback=\{<StockSkeleton />\}>
        <StockStatus productId=\{id\} />
      </Suspense>
      <Suspense fallback=\{<ReviewsSkeleton />\}>
        <Reviews productId=\{id\} />
      </Suspense>
    </main>
  );
\}

mkdir -p .claude/skills/nextjs-rendering
# Paste the Recipe content into .claude/skills/nextjs-rendering/SKILL.md