The Modern Full Stack Next.js Course! 🎉
Sign up for the Modern Full Stack Next.js Course and get access to 7+ Projects, 250+ Lessons, 30+ Quizzes, 10+ Exercises
⌘KPress Cmd + K to search lessons
Understanding different data fetching methods in Next.js is crucial for performance. But more importantly, we need to think of them as different flavours of the same data fetching method i.e. Server-Side Rendering.
It simply depends on where you are going to fetch the data from.
There are three main data fetching methods aka flavours of SSR in Next.js:
SSG is a data fetching method that fetches data at build time. The data is then served as static HTML. So data is fetched at build time and remains static. The fetching happens at build time but still on the server.
The con of SSG is that if you have 100,000 products and you try to build every single product then your build time will be massive.
ISR is a dynamic version of SSG. Here data is fetched at build time but then it is refreshed at a regular interval aka revalidated. This is useful for content that changes frequently, such as news articles or product listings.
The con of ISR is that it is not as fast as SSG because it has to fetch the data on every request after the initial build.
SSR is a data fetching method that fetches data on every request. The data is then served as static HTML. The data is fetched on the server and then the HTML is sent to the client. This is the default behaviour of Next.js.
The con of SSR is that it is not as fast as SSG or ISR because it has to fetch the data on every request.
Before we dive into the Chrome DevTools method, let's explore caching behavior with this interactive component:
Explore different data fetching methods in Next.js using Pokémon data
Static Site Generation: Pokémon data is generated at build time and doesn't change
Data fetched 0 times
No Pokémon data fetched yet. Click "Fetch Data" to get started!
This visualizer demonstrates three data fetching methods in Next.js:
Play around with the different methods to see how caching affects data freshness and fetch frequency.