Exploring Data Fetching Strategies in Next.js: CSR, SSR, SSG, and ISR

October 19, 2024
·
views
·
likes

Introduction

Understanding the four different data-fetching methods in Next.js can initially feel overwhelming.

CSR (Client-Side Rendering) fetches data from an API after the page loads, typically using useEffect on every render.

SSR (Server-Side Rendering), on the other hand, retrieves data on every request, generating the page before it is sent to the user, which can cause a delay.

SSG (Static Site Generation) fetches data only once during build time, so the page remains static and does not fetch data on each request.

ISR (Incremental Static Regeneration) is a combination of SSR and SSG. Under certain conditions, the page is rebuilt and fetches data from the API again.

On-Demand Revalidation

This is not a data-fetching method but a way to trigger a page rebuild for SSR or SSG based on specific events.

LikeButton
Footer