NextJs 13 fetching data: using the cache and revalidating flags

DanielNovember 25, 2022July 13, 20232 Comments

Data fetching was greatly simplified in NextJs 13. We now have one uniform way of fetching data.

Let's look at the code discussed in NextJs 13 data fetching – a basic GET example:

// app/page.js
const api = 'https://jsonplaceholder.typicode.com/posts'

const loadDataFromServer = async ()=> {
    const response = await fetch(api)
    return await  response.json()
}

export default async () => {
    const articles = await loadDataFromServer()
    return (
        /* loop through articles and show them */
    )
}

There are 3 ways we can fetch data in NextJs 13:

• cached data
• dynamic data
• revalidate

The way you switch between them is by passing the cache and revalidate flags to the fetch function.

Let's see the different fetching types one by one:

NextJs 13 fetch with Cached Data

This is the default way. You will get it if you don't pass any param to the fetch function:

fetch('https://api.example.com')

Or if we want to explicitly add it we can set the force-cache value for the cache parameter:

fetch('https://api.example.com', { cache: 'force-cache' })

With cache data, NextJs will only do the actual HTTP request once, at the build time. The next time we are loading the page NextJs will reply with the initial data and will not do again the request.

Use this type of fetching for data that does not change often. For example data from a contact page.

NextJs 13 fetch with Dynamic Data

When we want to run a new request for each page load we can use the no-store value for the cache parameter.

fetch('https://api.example.com', { cache: 'no-store' })

Use this for data that needs to be updated in real-time, at each page load. For example the number of available seats for an event.

NextJs 13 fetch with Revalidating Data

We can achieve a mix between Dynamic Data and Cached Data if we use the revalidate flag:

fetch('https://api.example.com', { next: { revalidate: 10 } });

Use this for the case when we have data that changes, but now very often. For example, you may want to refresh the comments on a blog each 15 min.

Added this table to summarize all of this:

What about getServerSideProps, getStaticProps, SSR or CSR in NextJs 13?

Before NextJs 13, we were using special functions like getServerSideProps for real-time data, or getStaticProps for cached data. These functions were removed in NextJs 13 and replaced with the above fetching formats.

I've put together this table to show a somehow relative comparison between the two:

Keep in mind that the recommended way of fetching data is using NextJs server components, and if we want to add loading sates to our pages we can use the loading.js file or React Suspense.

You can find the official documentation here.