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