🚀 Next.js App Router: Forget getStaticProps, Think Caching
When I first switched from Pages Router to the new App Router in Next.js, I noticed something strange:
👉 There’s no getStaticProps or getServerSideProps.
At first it felt like SSG & SSR were “gone”… but in reality, they’ve just been reimagined.
In App Router, rendering strategy = caching strategy.
Here’s how it works ⬇️
🔹 CSR (Client-Side Rendering)
`'use client';
useEffect(() => {
fetch('/api/data').then(r => r.json());
}, []);`
Happens by default when you fetch data in a Client Component.
🔹 SSR (Server-Side Rendering)
await fetch(url, { cache: 'no-store' })
This ensures fresh data on every request.
🔹 SSG (Static Site Generation)
await fetch(url, { cache: 'force-cache' }) // default
Data is fetched at build time, HTML is reused for all users.
🔹 ISR (Incremental Static Regeneration)
await fetch(url, { next: { revalidate: 60 } })
Page is pre-rendered like SSG, but revalidated every 60s in the background.
⚖️ Old mental model:
getStaticProps = SSG
getServerSideProps = SSR
⚡ New mental model:
fetch + caching = CSR, SSR, SSG, ISR
💡 Key takeaway:
Next.js App Router unifies rendering modes under one API. Instead of special lifecycle methods, you just decide caching rules → much more flexible (and powerful).
Top comments (0)