Stale While Revalidate

This lesson explores the concept of stale while revalidate and how it can be implemented in a data fetching library. Stale while revalidate refers to the practice of returning cached data immediately while fetching newer data in the background.

This strategy can significantly improve the perceived performance of an application, particularly those that require up-to-date data like stock market apps or social media feeds. While the example app in this lesson may not require real-time data, stale while revalidate will be implemented to demonstrate its functionality.

Understanding SWR#

The term stale while revalidate originates from the HTTP cache control header. It means that if you already have cached data and want to revalidate or fetch new data, you can immediately return the cached data while fetching the newer data in the background. Once the new data is fetched, the previously cached data is considered stale.

Implementing this strategy can enhance the performance of applications that rely on up-to-date information.

Implementing SWR#

To implement stale while revalidate in a data fetching library, a few steps need to be followed. First, it's necessary to check if the option for refetching on component mount is enabled. Additionally, it's important to ensure that the data's status is not currently loading or idle, as we are only interested in refetching data that has already been fetched. Furthermore, to prevent an infinite refetch loop, it's necessary to check if the data is stale, meaning it is older than a certain time threshold.

First let's add an option called refetchOnMount and set it to true in our home component.

xxxxxxxxxx

// Home.jsx

​

useData("pokemons", () => getPokemons(randomLimit)); // old

useData("pokemons", () => getPokemons(randomLimit), { refetchOnMount: true }); // new

This option doesn't yet exist but we're going to implement it in our data loader file.

In our useData hook, above the return statement, let's add an if statement to first check if the refetchOnMount option is set to true and also if the data status is set to success.

xxxxxxxxxx

// data-loader.js

​

if (options?.refetchOnMount && data.status === "success") {

  prefetchData(key, fn, { refetching: true });

}

The refetching option doesn't yet exist in the prefetchData function but the reason it exists is to change the state of the data to refetching in case the user wants to show a refetching specific loader or something.

xxxxxxxxxx

export function useData(key, fn, options) {

  // code

}

Let's implement this in the prefetchData function. We'll first pass the options argument into the function.

xxxxxxxxxx

export function prefetchData(key, fn) // old

export function prefetchData(key, fn, options) // new