⚡ Partial Pre-Rendering in Next.js

Partial Pre-Rendering (PPR) is a concept introduced in Next.js App Router (Next.js 13+ with React Server Components) that allows a mix of static and dynamic rendering on the same page. This means that part of a page can be pre-rendered at build time (SSG) while another part can be fetched dynamically (SSR or ISR).

📌 1. Why Partial Pre-Rendering?

✔️ Faster initial load – Static content loads instantly
✔️ Real-time data – Dynamic sections update on request
✔️ SEO-friendly – Pre-rendered content is indexed
✔️ Optimized performance – Less load on the server

📌 2. How Does PPR Work?

Next.js allows different rendering strategies within the same page:

1. Static Pre-rendering → Uses fetch() with cache: 'force-cache' (SSG)

2. Dynamic Fetching → Uses fetch() with cache: 'no-store' (SSR)

3. Revalidating Content → Uses fetch() with revalidate (ISR)

📌 3. Example: Mixing Static & Dynamic Data

In the App Router (app/), you can partially pre-render content.

🔹 app/page.js (Homepage)

javascript
<h1>Welcome to Next.js 🚀<p>Dynamic Data: {data.message}<p>Updated every 60s: {data.count}</p>;}

✅ Data updates every 60 seconds without full re-rendering

📌 5. Best Practices for Partial Pre-Rendering

✔️ Use SSG (cache: 'force-cache') for static content
✔️ Use SSR (cache: 'no-store') for real-time data
✔️ Use ISR (revalidate: time) for frequently updated sections
✔️ Mix static and dynamic components wisely