Renderização Estática vs. Dinâmica

// Estático por padrão -- sem funções dinâmicas, sem fetches não cacheados
export default async function AboutPage() {
  return <h1>Sobre Nós</h1>; // Compilado no momento da implantação
}
 
// Torna-se dinâmico automaticamente ao usar funções dinâmicas
import { cookies } from "next/headers";
 
export default async function DashboardPage() {
  const cookieStore = await cookies(); // Isso opta pela renderização dinâmica
  return <h1>Painel</h1>;
}
 
// Força estático ou dinâmico com configuração de segmento
export const dynamic = "force-dynamic"; // Sempre renderizar no momento da requisição
export const dynamic = "force-static";  // Sempre renderizar no momento da compilação
 
// Pré-renderiza rotas dinâmicas no momento da compilação
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map((p) => ({ slug: p.slug }));
}

// app/blog/[slug]/page.tsx -- Geração estática com generateStaticParams
import { notFound } from "next/navigation";
 
type Post = { slug: string; title: string; content: string; date: string };
 
async function getPost(slug: string): Promise<Post | null> {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { tags: [`post-${slug}`] },
  });
  if (!res.ok) return null;
  return res.json();
}
 
// Pré-renderiza esses caminhos no momento da compilação
export async function generateStaticParams() {
  const res = await fetch("https://api.example.com/posts");
  const posts: Post[] = await res.json();
 
  return posts.map((post) => ({
    slug: post.slug,
  }));
}
 
// Gera metadados para cada post
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) return { title: "Não Encontrado" };
  return { title: post.title };
}
 
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound();
 
  return (
    <article className="prose max-w-2xl mx-auto p-6">
      <h1>{post.title}</h1>
      <time className="text-gray-500">{post.date}</time>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// app/dashboard/page.tsx -- Renderização dinâmica (usa cookies)
import { cookies } from "next/headers";
import { db } from "@/lib/db";
import { verifySession } from "@/lib/auth";
 
export default async function DashboardPage() {
  const cookieStore = await cookies();
  const token = cookieStore.get("session")?.value;
  const session = await verifySession(token);
 
  if (!session) {
    return <p>Por favor, faça login</p>;
  }
 
  const stats = await db.userStats.findUnique({
    where: { userId: session.userId },
  });
 
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Bem-vindo, {session.user.name}</h1>
      <div className="grid grid-cols-3 gap-4 mt-6">
        <StatCard label="Pedidos" value={stats?.orders ?? 0} />
        <StatCard label="Receita" value={`$${stats?.revenue ?? 0}`} />
        <StatCard label="Clientes" value={stats?.customers ?? 0} />
      </div>
    </main>
  );
}
 
function StatCard({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="border rounded p-4">
      <p className="text-sm text-gray-500">{label}</p>
      <p className="text-2xl font-bold">{value}</p>
    </div>
  );
}

// Permite a renderização de caminhos não pré-gerados (comportamento padrão)
export const dynamicParams = true;
 
// Retorna 404 para caminhos não pré-gerados
export const dynamicParams = false;

// Revalida todas as páginas sob este layout a cada 60 segundos
export const revalidate = 60;
 
// Nunca revalida (totalmente estático até a próxima implantação)
export const revalidate = false;

import { Suspense } from "react";
import { cookies } from "next/headers";
 
// O shell estático é renderizado no momento da compilação
export default function Page() {
  return (
    <main>
      <h1>Página do Produto</h1> {/* Estático */}
      <StaticProductInfo />  {/* Estático */}
 
      <Suspense fallback={<p>Carregando carrinho...</p>}>
        <DynamicCartPreview /> {/* Dinâmico -- chama cookies() */}
      </Suspense>
    </main>
  );
}
 
async function DynamicCartPreview() {
  const cookieStore = await cookies();
  const cartId = cookieStore.get("cart-id")?.value;
  // ...
}

// Tipo de retorno de generateStaticParams
export async function generateStaticParams(): Promise<{ slug: string }[]> {
  // ...
}
 
// Para rotas dinâmicas aninhadas
export async function generateStaticParams(): Promise<{
  category: string;
  slug: string;
}[]> {
  // ...
}
 
// Tipos de configuração de segmento
export const dynamic: "auto" | "force-dynamic" | "force-static" | "error" = "auto";
export const dynamicParams: boolean = true;
export const revalidate: number | false = false;
export const runtime: "nodejs" | "edge" = "nodejs";