⚡ Pre-Rendering in Next.js

Next.js pre-renders pages to improve performance and SEO by generating HTML before the user requests it. There are two types of pre-rendering:

1️⃣ Static Site Generation (SSG) – Pre-renders at build time
2️⃣ Server-Side Rendering (SSR) – Pre-renders on each request

📌 1. Static Site Generation (SSG)

SSG pre-renders pages at build time and serves static HTML, making it fast and SEO-friendly.

🔹 Example: Using getStaticProps() (SSG)

javascript
<h1>Live Data: {data.value}</h1>;}

✅ Data is fetched on each request
✅ Great for real-time updates (e.g., stock prices, user dashboards)
❌ Slower than SSG due to server request

📌 3. Incremental Static Regeneration (ISR)

ISR allows Next.js to update static pages after deployment, without rebuilding the entire site.

🔹 Example: Using ISR (revalidate)

javascript
export async function getStaticProps() {  const res = await fetch("https://api.example.com/posts");  const posts = await res.json();  return { props: { posts }, revalidate: 60 }; // Revalidate every 60 seconds}

✅ Static page updates automatically
✅ Better performance than SSR

📌 4. Pre-Rendering in App Router (app/ Directory)

In Next.js 13+, pre-rendering is controlled using fetch options inside React Server Components.

🔹 Static Pre-Rendering (SSG)

javascript
async function getData() {  const res = await fetch("https://api.example.com/data", { cache: "force-cache" });  return res.json();}

🔹 Dynamic Rendering (SSR)

javascript
async function getData() {  const res = await fetch("https://api.example.com/data", { cache: "no-store" });  return res.json();}

📌 5. When to Use Each Rendering Mode?