Create loading.tsx for route-level loading UI - automatically wraps page in Suspense: // app/dashboard/loading.tsx: export default function Loading() { return

; }. Combine with error.tsx for error handling: // app/dashboard/error.tsx: 'use client'; export default function Error({ error, reset }) { return ; }. loading.tsx provides instant server response, streaming HTML progressively. Known Next.js 15 issues: loading.tsx may not show on second page load (versions 15.0.3-15.0.4), antivirus software can block streaming. Add key prop to Suspense for dynamic params: <Suspense key={searchParams.id} fallback={}>. Production: use loading.tsx for automatic wrapping, manual Suspense for granular control. Works with React 18+ streaming SSR.

Wrap async Server Components with Suspense for streaming: import { Suspense } from 'react'; async function UserData({ userId }) { const user = await fetchUser(userId); return

; }. Page: export default function Page({ params }) { return <>

Profile

<Suspense fallback={}></>; }. React pauses at Suspense boundary, flushes HTML up to that point, streams immediately to browser. Benefits: TTFB improves (instant response), progressive rendering, perceived performance boost. Each Suspense boundary streams independently. Production: wrap slow operations (database queries, API calls, file reads) with Suspense. Combine with React 18 streaming SSR. Server Components automatically wait for promises - Suspense shows fallback during resolution. Use multiple boundaries for concurrent streaming of different page sections.

Enable incremental PPR in next.config.js: export default { experimental: { ppr: 'incremental' } }. Opt-in per route: // app/dashboard/page.tsx: export const experimental_ppr = true; export default async function Page() { return <><Suspense fallback={}></>; }. PPR prerenders static content at build time, postpones dynamic content until request. Suspense boundaries mark dynamic sections. Static parts render immediately, dynamic parts stream on-demand. Benefits: instant static shell, personalized dynamic data, best TTFB. Production: use for e-commerce (static product images + dynamic pricing), dashboards (static nav + dynamic data), blogs (static content + dynamic comments). Currently experimental (not production-ready). Routes without experimental_ppr = true use standard rendering. Combine with Cache Components in Next.js 15+.

Next.js 15.2 streams page content before generateMetadata completes (breaking change): export async function generateMetadata({ params }) { const product = await fetchProduct(params.id); return { title: product.name, description: product.desc }; }. Previously: Next.js waited for generateMetadata before sending HTML. Now: sends page immediately, streams metadata in background. Metadata object loads asynchronously without blocking content. Known issue: no Suspense trigger for generateMetadata fetches - page may appear hung with slow APIs. Workaround: wrap data fetching with React cache() for deduplication between generateMetadata and page: import { cache } from 'react'; const getProduct = cache(async (id) => await fetch(...)); export async function generateMetadata({ params }) { const data = await getProduct(params.id); return { title: data.name }; }. Production: only supported in Server Components, automatic fetch() memoization, use cache() for custom fetchers.

Create multiple Suspense boundaries for independent streaming: import { Suspense } from 'react'; export default function Dashboard() { return

; }. Each boundary streams independently - fast components show immediately, slow components show fallback. Benefits: parts of page become interactive before others load, perceived performance, concurrent streaming. Best practice: place boundaries at logical UI breakpoints (navigation, main content, sidebar). Avoid over-granularity - don't create boundaries more fine-grained than user needs. Production: use for dashboards (nav + charts + table), e-commerce (header + products + recommendations), blogs (nav + article + comments). Each async Server Component wrapped in Suspense loads in parallel. Works with React 18+ concurrent rendering.

Create loading.tsx for route-level loading UI - automatically wraps page in Suspense: // app/dashboard/loading.tsx: export default function Loading() { return

; }. Combine with error.tsx for error handling: // app/dashboard/error.tsx: 'use client'; export default function Error({ error, reset }) { return ; }. loading.tsx provides instant server response, streaming HTML progressively. Known Next.js 15 issues: loading.tsx may not show on second page load (versions 15.0.3-15.0.4), antivirus software can block streaming. Add key prop to Suspense for dynamic params: <Suspense key={searchParams.id} fallback={}>. Production: use loading.tsx for automatic wrapping, manual Suspense for granular control. Works with React 18+ streaming SSR.

Wrap async Server Components with Suspense for streaming: import { Suspense } from 'react'; async function UserData({ userId }) { const user = await fetchUser(userId); return

; }. Page: export default function Page({ params }) { return <>

Profile

<Suspense fallback={}></>; }. React pauses at Suspense boundary, flushes HTML up to that point, streams immediately to browser. Benefits: TTFB improves (instant response), progressive rendering, perceived performance boost. Each Suspense boundary streams independently. Production: wrap slow operations (database queries, API calls, file reads) with Suspense. Combine with React 18 streaming SSR. Server Components automatically wait for promises - Suspense shows fallback during resolution. Use multiple boundaries for concurrent streaming of different page sections.

Enable incremental PPR in next.config.js: export default { experimental: { ppr: 'incremental' } }. Opt-in per route: // app/dashboard/page.tsx: export const experimental_ppr = true; export default async function Page() { return <><Suspense fallback={}></>; }. PPR prerenders static content at build time, postpones dynamic content until request. Suspense boundaries mark dynamic sections. Static parts render immediately, dynamic parts stream on-demand. Benefits: instant static shell, personalized dynamic data, best TTFB. Production: use for e-commerce (static product images + dynamic pricing), dashboards (static nav + dynamic data), blogs (static content + dynamic comments). Currently experimental (not production-ready). Routes without experimental_ppr = true use standard rendering. Combine with Cache Components in Next.js 15+.

Next.js 15.2 streams page content before generateMetadata completes (breaking change): export async function generateMetadata({ params }) { const product = await fetchProduct(params.id); return { title: product.name, description: product.desc }; }. Previously: Next.js waited for generateMetadata before sending HTML. Now: sends page immediately, streams metadata in background. Metadata object loads asynchronously without blocking content. Known issue: no Suspense trigger for generateMetadata fetches - page may appear hung with slow APIs. Workaround: wrap data fetching with React cache() for deduplication between generateMetadata and page: import { cache } from 'react'; const getProduct = cache(async (id) => await fetch(...)); export async function generateMetadata({ params }) { const data = await getProduct(params.id); return { title: data.name }; }. Production: only supported in Server Components, automatic fetch() memoization, use cache() for custom fetchers.

Create multiple Suspense boundaries for independent streaming: import { Suspense } from 'react'; export default function Dashboard() { return

; }. Each boundary streams independently - fast components show immediately, slow components show fallback. Benefits: parts of page become interactive before others load, perceived performance, concurrent streaming. Best practice: place boundaries at logical UI breakpoints (navigation, main content, sidebar). Avoid over-granularity - don't create boundaries more fine-grained than user needs. Production: use for dashboards (nav + charts + table), e-commerce (header + products + recommendations), blogs (nav + article + comments). Each async Server Component wrapped in Suspense loads in parallel. Works with React 18+ concurrent rendering.