Habilidade de Estratégias de Renderização do Next.js - Uma receita de habilidade Claude Code para profundo conhecimento em SSR, SSG, ISR, CSR e PPR

---
name: nextjs-rendering-strategies
description: "Profundo conhecimento em decisões de SSR, SSG, ISR, CSR e Partial Prerendering para Next.js. Use quando solicitado: estratégia de renderização, SSR vs SSG, estático vs dinâmico, PPR, pré-renderização parcial, generateStaticParams, ISR, CSR."
allowed-tools: "Read, Write, Edit, Glob, Grep, Bash(npm:*), Bash(npx:*), Agent"
---
 
# Estratégias de Renderização do Next.js
 
Você é um especialista em renderização do Next.js. Ajude os desenvolvedores a escolher e implementar a estratégia de renderização ideal para cada página.
 
## Fluxograma de Decisão de Renderização
 
Siga esta árvore de decisão para cada página:
 
1. **O conteúdo muda por usuário ou por solicitação?**
   - Não -> Vá para o passo 2
   - Sim -> Vá para o passo 4
 
2. **O conteúdo muda alguma coisa após a compilação?**
   - Não -> **SSG** (Static Site Generation)
   - Sim -> Vá para o passo 3
 
3. **Com que frequência ele muda?**
   - Intervalo previsível -> **ISR** (Incremental Static Regeneration)
   - Imprevisível (orientado a eventos) -> **ISR com revalidação sob demanda**
   - Tempo real -> **SSR** ou **CSR** com polling
 
4. **A página tem partes estáticas e dinâmicas?**
   - Sim -> **PPR** (Partial Prerendering) com Suspense
   - Não, totalmente dinâmico -> **SSR** (Server-Side Rendering)
   - Apenas interativo no cliente -> **CSR** (Client-Side Rendering)
 
## Referência de Estratégia
 
### SSG - Static Site Generation
 
**Quando:** O conteúdo é o mesmo para todos os usuários e não muda após a compilação (ou muda muito raramente).
 
**Exemplos:** Páginas de marketing, documentação, posts de blog, páginas legais.
 
```tsx
// app/about/page.tsx
// Esta página é automaticamente estática porque não tem funções dinâmicas
export default function AboutPage() \{
  return <div>Conteúdo sobre nós...</div>;
\}
 
// Rotas dinâmicas com 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\} />;
\}

// ISR baseado em tempo
// app/products/page.tsx
export const revalidate = 3600; // revalida a cada hora
 
export default async function ProductsPage() \{
  const products = await getProducts();
  return <ProductGrid products=\{products\} />;
\}
 
// ISR sob demanda 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"); // invalida todas as páginas de produtos
\}

// app/dashboard/page.tsx
import \{ cookies \} from "next/headers";
 
export default async function DashboardPage() \{
  // Usar cookies() torna esta rota dinâmica (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 a cada 5 segundos
  );
 
  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); // estático, em cache
 
  return (
    <main>
      \{/* Shell estático - pré-renderizado no tempo de compilação */\}
      <h1>\{product.name\}</h1>
      <p>\{product.description\}</p>
      <StaticImages images=\{product.images\} />
 
      \{/* Buracos dinâmicos - transmitidos no momento da solicitação */\}
      <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
# Cole o conteúdo da Receita em .claude/skills/nextjs-rendering/SKILL.md