Renderizado Estático vs Dinámico

// Estático de forma predeterminada -- sin funciones dinámicas, sin búsquedas sin caché
export default async function AboutPage() {
  return <h1>About Us</h1>; // Construido en tiempo de despliegue
}
 
// Se vuelve dinámico automáticamente al usar funciones dinámicas
import { cookies } from "next/headers";
 
export default async function DashboardPage() {
  const cookieStore = await cookies(); // Esto opta al renderizado dinámico
  return <h1>Dashboard</h1>;
}
 
// Fuerza estático o dinámico con configuración de segmento
export const dynamic = "force-dynamic"; // Siempre renderiza en tiempo de solicitud
export const dynamic = "force-static";  // Siempre renderiza en tiempo de compilación
 
// Pre-renderiza rutas dinámicas en tiempo de compilación
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map((p) => ({ slug: p.slug }));
}

// app/blog/[slug]/page.tsx -- Generación estática con 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();
}
 
// Pre-renderiza estas rutas en tiempo de compilación
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,
  }));
}
 
// Genera metadatos para cada publicación
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) return { title: "Not Found" };
  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 -- Renderizado dinámico (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>Please sign in</p>;
  }
 
  const stats = await db.userStats.findUnique({
    where: { userId: session.userId },
  });
 
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Welcome, {session.user.name}</h1>
      <div className="grid grid-cols-3 gap-4 mt-6">
        <StatCard label="Orders" value={stats?.orders ?? 0} />
        <StatCard label="Revenue" value={`$${stats?.revenue ?? 0}`} />
        <StatCard label="Customers" 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 renderizado de rutas no pre-generadas (comportamiento predeterminado)
export const dynamicParams = true;
 
// Devuelve 404 para rutas no pre-generadas
export const dynamicParams = false;

// Revalida todas las páginas bajo este layout cada 60 segundos
export const revalidate = 60;
 
// Nunca revalida (completamente estático hasta el próximo despliegue)
export const revalidate = false;

import { Suspense } from "react";
import { cookies } from "next/headers";
 
// El shell estático se renderiza en tiempo de compilación
export default function Page() {
  return (
    <main>
      <h1>Product Page</h1> {/* Estático */}
      <StaticProductInfo />  {/* Estático */}
 
      <Suspense fallback={<p>Loading cart...</p>}>
        <DynamicCartPreview /> {/* Dinámico -- llama a 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 rutas dinámicas anidadas
export async function generateStaticParams(): Promise<{
  category: string;
  slug: string;
}[]> {
  // ...
}
 
// Tipos de configuración 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";