Different Data Fetching Methods
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:
- Static Site Generation (SSG)
- Incremental Static Generation (ISR)
- Server-Side Rendering (SSR)
Static Site Generation (SSG)
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.
Incremental Static Generation (ISR)
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.
Server-Side Rendering (SSR)
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.
Interactive Data Fetching Visualizer
Before we dive into the Chrome DevTools method, let's explore caching behavior with this interactive component:
Next.js Data Fetching Visualizer (Pokémon Edition)
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
Pokémon Data:
No Pokémon data fetched yet. Click "Fetch Data" to get started!
This visualizer demonstrates three data fetching methods in Next.js:
- SSG (Static Site Generation): Data is fetched at build time and remains static.
- ISR (Incremental Static Regeneration): Data is initially static but refreshes at regular intervals.
- SSR (Server-Side Rendering): Fresh data is fetched on every request.
Play around with the different methods to see how caching affects data freshness and fetch frequency.