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)