DEV Community

Cover image for 🚀 Next.js 15.3.4: PPR and Why It’s Even More Powerful Now
Neel
Neel

Posted on • Edited on

🚀 Next.js 15.3.4: PPR and Why It’s Even More Powerful Now

#ppr #nextjs #nextjs15 #webdev

✅ How It Works

Your page renders top-down (like a waterfall).

As soon as some HTML is ready (like header/nav), it’s flushed to the browser.

Components that are still loading (like awaited data or suspense boundaries) are rendered after and streamed later.

It behaves like a hybrid between SSR and React Server Components with Suspense.

✅ What 15.3.4 Brings to PPR

> 🦾 Build-time improvements with Turbopack

  • next build --turbopack is now available in alpha for production builds, delivering major build-time speedups—28% faster on 4-core, up to 83% on high-end machines

  • While still alpha, it's a massive leap forward for rapid iteration in staging environments.

> 🔍 Better observability & routing

  • Client instrumentation hook lets you initialize analytics or performance tracking before client code loads

  • Navigation hooks (onNavigate, useLinkStatus) give you granular control over route changes, enabling improved loading states and UX

These enhancements directly support PPR by giving you both a static shell and dynamic loading control, with fewer toolchain limitations.

🔄 PPR + Next.js 15.3.4 vs CSR, SSR, SSG, ISR 

| Strategy | Build Time | Runtime | Latest with 15.3.4 | | -------- | ---------- | -------------------------------- | -------------------------------- | **CSR** | ❌ | ✅ | No Vercel support | **SSR** | ❌ | ✅ | Fully supported | **SSG** | ✅ | ❌ | Stable via SSG & ISR | **ISR** | ✅ | ✅ | Best static/dynamic mix | **PPR** | ✅ | ✅ (+streaming & instrumentation) | *Enhanced by React 19 readiness*
Enter fullscreen mode Exit fullscreen mode

> Why it matters:

  • Streamed PPR benefits from React¹⁹ and React 18+ streaming APIs supported in v15.3.4.

  • Your app now gets both static safety and dynamic flexibility, with improved DX and tooling.

🛠️ Using PPR in 15.3.4

// app/page.tsx — static shell + dynamic feed import StaticLayout from './StaticLayout'; import DynamicFeed from './DynamicFeed'; export default function Page() { return ( <> <StaticLayout /> <DynamicFeed /> {/* has dynamic = 'force-dynamic' */} </> ); }
Enter fullscreen mode Exit fullscreen mode 
// components/DynamicFeed.tsx export const dynamic = 'force-dynamic'; export default async function DynamicFeed() { const data = await fetch( 'https://api.example.com/feed', { cache: 'no-store' } ).then(r => r.json()); return <Feed data={data} />; }
Enter fullscreen mode Exit fullscreen mode 
// instrumentation-client.ts performance.mark('app-init');
Enter fullscreen mode Exit fullscreen mode
  • Use cache: 'force-static' for static, force-dynamic for runtime components.
  • Stream dynamic parts via React Suspense.
  • Add instrumentation-client.ts for observability.
  • Use onNavigate hooks to manage loading UIs.

> 🎯 KeyPoints - 15.3.4

  • ✅ Latest stable version is 15.3.4 as of June 2025
  • 🛠️ Full support for Turbopack builds in alpha.
  • 🧠 Enhanced routing & instrumentation APIs.
  • 🚀 PPR gets even better streaming, control, and observability.
  • 🤖 Built on React 19 readiness—prepares for the future.

Top comments (0)