web-developmentSeptember 28, 20267 min

Partial Prerendering in Next.js: Static Shop + Dynamic Price Without Lag

By Arash Latifi

With PPR, render product lists static and prices dynamic — LCP under 1.2s without stale data.

TL;DR: PPR pre-renders static parts (list) and streams dynamic parts (price). For shops: fast LCP + fresh price.

Why PPR for shops?

Without PPR: all static (stale price) or all dynamic (slow LCP). PPR gives both.

3-min implementation

Checklist

[ ] ppr: true in next.config
[ ] Static shell without dynamic fetch
[ ] Prices in Suspense with revalidate 30

FAQ

PPR vs ISR? ISR rebuilds whole page; PPR only streams dynamic parts.

Conflicts with async params? No — PPR is about fetch, params is separate.

Cost? Zero — just upgrade to 15.4.

TSX

// app/shop/page.tsx
import { Suspense } from "react";

export default function ShopPage() {
  return (
    <>
      <ProductGrid /> {/* static */}
      <Suspense fallback={<PriceSkeleton />}>
        <LivePrices /> {/* dynamic — streamed */}
      </Suspense>
    </>
  );
}

async function LivePrices() {
  "use cache";
  const prices = await fetch("https://api.shop/prices", { next: { revalidate: 30 } });
  return <PriceList data={await prices.json()} />;
}

The DevArt | Arash Latifi

Corporate & Personal

Medical & Real Estate

E-commerce

Cities

Partial Prerendering in Next.js: Static Shop + Dynamic Price Without Lag

Why PPR for shops?

3-min implementation

Checklist

FAQ

Partial Prerendering in Next.js: Static Shop + Dynamic Price Without Lag

Why PPR for shops?

3-min implementation

Checklist

FAQ