PPR & Advanced Rendering

// next.config.ts — verify flag for your pinned Next.js version
const nextConfig = {
  experimental: {
    ppr: true, // or 'incremental' — check docs for your version
  },
};
export default nextConfig;

// app/page.tsx — static hero + dynamic hole
import { Suspense } from "react";
 
async function PersonalizedBanner() {
  const user = await getSessionUser(); // dynamic — request time
  return <p>Welcome, {user?.name ?? "Guest"}</p>;
}
 
export default function HomePage() {
  return (
    <main>
      <section>{/* static marketing — in shell */}</section>
      <h1>Shop deals</h1>
      <Suspense fallback={<div className="skeleton h-6 w-40" />}>
        <PersonalizedBanner />
      </Suspense>
    </main>
  );
}

Static (shell)
→ Server Components with cacheable fetch
→ No cookies() / headers() / searchParams in that subtree

Dynamic hole
→ Components using dynamic APIs (cookies, headers, searchParams)
→ Uncached fetch or Suspense with dynamic child
→ Streamed at request time

Build time
  → static shell HTML generated (layout, hero, CMS blocks)
  → stored at CDN edge

Request time
  → shell served instantly from CDN
  → dynamic Suspense holes stream in with per-user data
  → complete page assembles

// app/products/page.tsx
export const dynamic = "force-static";     // always static at build
export const revalidate = 3600;            // ISR — revalidate every hour
export const fetchCache = "default-cache"; // opt into Data Cache
 
// app/dashboard/page.tsx
export const dynamic = "force-dynamic";    // always per-request
export const fetchCache = "force-no-store";

dynamic          → 'auto' | 'force-static' | 'force-dynamic' | 'error'
revalidate       → false (static) | number (ISR seconds) | 0 (dynamic)
fetchCache       → 'auto' | 'default-cache' | 'only-cache' | 'force-cache' | 'force-no-store'
runtime          → 'nodejs' | 'edge'
preferredRegion  → edge region hint for latency-sensitive routes

// app/products/[id]/page.tsx
export const revalidate = 300;
 
async function LiveStock({ id }: { id: string }) {
  const stock = await fetch(`https://api.example.com/stock/${id}`, {
    cache: "no-store",
  }).then((r) => r.json());
  return <span>{stock.count} in stock</span>;
}
 
export default async function ProductPage(props: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await props.params;
  const product = await getProduct(id); // cached with ISR
 
  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <Suspense fallback={<span>Checking stock…</span>}>
        <LiveStock id={id} />
      </Suspense>
    </article>
  );
}

ISR
→ Revalidates whole static pages on a timer
→ Page is fully static between revalidations

Streaming SSR
→ Entire page rendered per request, sent in chunks
→ No persistent static shell at CDN

PPR
→ Permanent static shell + request-time dynamic holes
→ Shell never revalidates; holes always fresh

// app/dashboard/page.tsx
import { Suspense } from "react";
 
async function SlowMetrics() {
  const data = await fetchMetrics(); // 2s DB query
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
 
export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1>
      <Suspense fallback={<div className="skeleton">Loading metrics…</div>}>
        <SlowMetrics />
      </Suspense>
    </main>
  );
}

Blocking:  [wait 2s] → complete HTML → TTFB = 2s
Streaming: [0ms] shell + skeleton → [2s] metrics chunk streams in

// app/page.tsx
import { Suspense } from "react";
 
async function CartBadge() {
  const cart = await getCart(); // uses cookies() — dynamic
  return <span>{cart.itemCount} items</span>;
}
 
async function Recommendations() {
  const user = await getSessionUser();
  const items = await fetchRecommendations(user?.id);
  return <ProductGrid products={items} />;
}
 
export default function HomePage() {
  return (
    <main>
      <Hero />
      <FeaturedCategories />
      <CMSBlock slug="homepage-promo" />
 
      <Suspense fallback={<BadgeSkeleton />}>
        <CartBadge />
      </Suspense>
      <Suspense fallback={<GridSkeleton />}>
        <Recommendations />
      </Suspense>
    </main>
  );
}

Astro islands  → separate hydration roots, strict isolation
PPR holes      → one coordinated React tree, Suspense streaming
Client islands   → 'use client' widget for real-time WebSocket data

// Per-route opt-in (when supported by your version)
export const experimental_ppr = true;
 
export default function Page() {
  // ...
}

Dynamic API in layout       → entire subtree becomes dynamic
Uncached fetch in shell     → prevents shell prerendering
Missing Suspense on hole    → hole may block shell delivery
force-static + cookies()    → conflict — dynamic wins

Fully personalized page     → full SSR is simpler
Rarely visited long-tail     → ISR on-demand may suffice
Real-time data everywhere   → CSR client fetch or full SSR
Simple static site          → plain SSG — PPR adds complexity for no gain

Shell  → "CDN-served, build-time HTML."
Hole   → "Request-time, streamed via Suspense."
PPR    → "SSG speed + SSR personalization, same page."
ISR    → "Whole page refreshes on timer."
Stream → "Per-request chunks, no persistent shell."

Static marketing + user banner  → PPR
Whole page per-user             → full SSR
Public content, periodic update → ISR
Mostly static, one live widget  → PPR hole or client island
High-traffic hybrid routes      → PPR with incremental rollout