Data Fetching in Next.js

Click the strategies to navigate

SSG: Static-site generation

Runs once at build-time - reused for each request

15:06:47

SSR: Server-side rendering

Runs on every request - fetch data before sending page to client

15:06:47

CSR: Client-side rendering

Runs on every request - load page first and fetch data on client-side (loading... => data)

15:06:47

ISR: Incremental Static Regeneration

SSG and SSR combined - update data after a certain revalidation time (7 seconds)

15:06:47

to see changes


Erik Streller 2025 Source Code