Partial Prerendering (PPR)

// next.config.ts -- enable PPR
import type { NextConfig } from "next";
 
const config: NextConfig = {
  experimental: {
    ppr: true, // or "incremental" for per-route opt-in
  },
};
 
export default config;

// app/page.tsx -- static shell with dynamic holes
import { Suspense } from "react";
import { cookies } from "next/headers";
 
export default function Page() {
  return (
    <main>
      <h1>Welcome to the Store</h1>  {/* Static shell */}
      <StaticHero />                  {/* Static shell */}
 
      <Suspense fallback={<CartSkeleton />}>
        <DynamicCart />               {/* Dynamic hole -- streamed */}
      </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", // opt in per route
  },
};
 
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";
 
// Opt this route into PPR
export const experimental_ppr = true;
 
// Pre-generate product pages at build time
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>Product not found</p>;
 
  return (
    <main className="max-w-4xl mx-auto p-6">
      {/* ---- Static Shell (prerendered at build time) ---- */}
      <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>
 
      {/* ---- Dynamic Holes (streamed at request time) ---- */}
      <section className="mt-12">
        <h2 className="text-xl font-bold mb-4">Personalized For You</h2>
        <Suspense fallback={<RecommendationsSkeleton />}>
          <PersonalizedRecommendations />
        </Suspense>
      </section>
 
      <section className="mt-8">
        <h2 className="text-xl font-bold mb-4">Your Recent Views</h2>
        <Suspense fallback={<RecentViewsSkeleton />}>
          <RecentlyViewed />
        </Suspense>
      </section>
    </main>
  );
}
 
// ---- Dynamic Components (use request-time data) ----
 
async function PersonalizedRecommendations() {
  const cookieStore = await cookies();
  const userId = cookieStore.get("user-id")?.value;
 
  if (!userId) return <p>Sign in for personalized recommendations</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>No recent views</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" } };
 
// Only this page uses PPR
// app/products/[slug]/page.tsx
export const experimental_ppr = true;

// next.config.ts
export default { experimental: { ppr: true } };
// All routes automatically use PPR

export default function Page() {
  return (
    <main>
      <StaticNav />
      <StaticHero />
 
      {/* Each Suspense boundary is an independent dynamic hole */}
      <Suspense fallback={<UserBarSkeleton />}>
        <UserBar />       {/* cookies() */}
      </Suspense>
 
      <Suspense fallback={<PricingSkeleton />}>
        <LivePricing />   {/* cache: "no-store" */}
      </Suspense>
 
      <Suspense fallback={<WeatherSkeleton />}>
        <LocalWeather />  {/* headers() for geo */}
      </Suspense>
 
      <StaticFooter />
    </main>
  );
}

// Per-route PPR opt-in export
export const experimental_ppr: boolean = true;
 
// next.config.ts type
import type { NextConfig } from "next";
const config: NextConfig = {
  experimental: {
    ppr: true | "incremental",
  },
};