Prerrenderizado Parcial (PPR)

// next.config.ts -- habilitar PPR
import type { NextConfig } from "next";
 
const config: NextConfig = {
  experimental: {
    ppr: true, // o "incremental" para optar por ruta
  },
};
 
export default config;

// app/page.tsx -- shell estático con agujeros dinámicos
import { Suspense } from "react";
import { cookies } from "next/headers";
 
export default function Page() {
  return (
    <main>
      <h1>Bienvenido a la Tienda</h1>  {/* Shell estático */}
      <StaticHero />                  {/* Shell estático */}
 
      <Suspense fallback={<CartSkeleton />}>
        <DynamicCart />               {/* Agujero dinámico -- transmitido */}
      </Suspense>
    </main>
  );
}
 
async function DynamicCart() {
  const cookieStore = await cookies();
  const cartId = cookieStore.get("cart-id")?.value;
  const cart = await fetchCart(cartId);
  return <CartWidget items={cart.items} />;
}

// next.config.ts
import type { NextConfig } from "next";
 
const config: NextConfig = {
  experimental: {
    ppr: "incremental", // optar por ruta
  },
};
 
export default config;

// app/products/[slug]/page.tsx
import { Suspense } from "react";
import { cookies } from "next/headers";
import { db } from "@/lib/db";
import { AddToCartButton } from "./add-to-cart";
 
// Optar esta ruta en PPR
export const experimental_ppr = true;
 
// Pregenerar páginas de producto en tiempo de compilación
export async function generateStaticParams() {
  const products = await db.product.findMany({ select: { slug: true } });
  return products.map((p) => ({ slug: p.slug }));
}
 
type Props = { params: Promise<{ slug: string }> };
 
export default async function ProductPage({ params }: Props) {
  const { slug } = await params;
  const product = await db.product.findUnique({ where: { slug } });
 
  if (!product) return <p>Producto no encontrado</p>;
 
  return (
    <main className="max-w-4xl mx-auto p-6">
      {/* ---- Shell Estático (prerrenderizado en tiempo de compilación) ---- */}
      <div className="grid grid-cols-2 gap-8">
        <img
          src={product.imageUrl}
          alt={product.name}
          className="w-full rounded"
        />
        <div>
          <h1 className="text-3xl font-bold">{product.name}</h1>
          <p className="text-2xl text-gray-700 mt-2">
            ${product.price.toFixed(2)}
          </p>
          <p className="mt-4 text-gray-600">{product.description}</p>
          <AddToCartButton productId={product.id} />
        </div>
      </div>
 
      {/* ---- Agujeros Dinámicos (transmitidos en tiempo de solicitud) ---- */}
      <section className="mt-12">
        <h2 className="text-xl font-bold mb-4">Personalizado para Ti</h2>
        <Suspense fallback={<RecommendationsSkeleton />}>
          <PersonalizedRecommendations />
        </Suspense>
      </section>
 
      <section className="mt-8">
        <h2 className="text-xl font-bold mb-4">Tus Vistas Recientes</h2>
        <Suspense fallback={<RecentViewsSkeleton />}>
          <RecentlyViewed />
        </Suspense>
      </section>
    </main>
  );
}
 
// ---- Componentes Dinámicos (usan datos en tiempo de solicitud) ----
 
async function PersonalizedRecommendations() {
  const cookieStore = await cookies();
  const userId = cookieStore.get("user-id")?.value;
 
  if (!userId) return <p>Inicia sesión para recomendaciones personalizadas</p>;
 
  const recs = await fetch(
    `https://api.example.com/recommendations?user=${userId}`,
    { cache: "no-store" }
  );
  const products = await recs.json();
 
  return (
    <div className="grid grid-cols-4 gap-4">
      {products.map((p: { id: string; name: string; price: number }) => (
        <div key={p.id} className="border rounded p-3">
          <p className="font-medium">{p.name}</p>
          <p className="text-gray-500">${p.price.toFixed(2)}</p>
        </div>
      ))}
    </div>
  );
}
 
async function RecentlyViewed() {
  const cookieStore = await cookies();
  const history = cookieStore.get("view-history")?.value;
 
  if (!history) return <p>Sin vistas recientes</p>;
 
  const ids = JSON.parse(history) as string[];
  const products = await db.product.findMany({
    where: { id: { in: ids } },
  });
 
  return (
    <div className="flex gap-4 overflow-x-auto">
      {products.map((p) => (
        <div key={p.id} className="min-w-[150px] border rounded p-3">
          <p className="font-medium">{p.name}</p>
        </div>
      ))}
    </div>
  );
}
 
// ---- Skeletons ----
 
function RecommendationsSkeleton() {
  return (
    <div className="grid grid-cols-4 gap-4">
      {Array.from({ length: 4 }).map((_, i) => (
        <div key={i} className="h-24 bg-gray-100 rounded animate-pulse" />
      ))}
    </div>
  );
}
 
function RecentViewsSkeleton() {
  return (
    <div className="flex gap-4">
      {Array.from({ length: 3 }).map((_, i) => (
        <div key={i} className="w-[150px] h-20 bg-gray-100 rounded animate-pulse" />
      ))}
    </div>
  );
}

// next.config.ts
export default { experimental: { ppr: "incremental" } };
 
// Solo esta página usa PPR
// app/products/[slug]/page.tsx
export const experimental_ppr = true;

// next.config.ts
export default { experimental: { ppr: true } };
// Todas las rutas automáticamente usan PPR

export default function Page() {
  return (
    <main>
      <StaticNav />
      <StaticHero />
 
      {/* Cada límite Suspense es un agujero dinámico independiente */}
      <Suspense fallback={<UserBarSkeleton />}>
        <UserBar />       {/* cookies() */}
      </Suspense>
 
      <Suspense fallback={<PricingSkeleton />}>
        <LivePricing />   {/* cache: "no-store" */}
      </Suspense>
 
      <Suspense fallback={<WeatherSkeleton />}>
        <LocalWeather />  {/* headers() para geo */}
      </Suspense>
 
      <StaticFooter />
    </main>
  );
}

// Exportación de optar por ruta en PPR
export const experimental_ppr: boolean = true;
 
// Tipo next.config.ts
import type { NextConfig } from "next";
const config: NextConfig = {
  experimental: {
    ppr: true | "incremental",
  },
};