What does it stand for

• Returns the data from cache (stale)
• Sends the fetch request (revalidate), and then
• Comes with the up-to-date data again.

Why

 “It helps developers balance between immediacy—loading cached content right away—and freshness—ensuring updates to the cached content are used in the future. If you maintain a third-party web service or library that updates on a regular schedule, or your first-party assets tend to have short lifetimes, then stale-while-revalidate may be a useful addition to your existing caching policies.”

How

UseSWR hook

When

On component load

On Tab focus

On a schedule

In response to changing data

reconnecting to internet

NOT on the server

How do you get the data

Pass a key and a function

const getUserProfile = async userSlug => {
    const USER_PROFILE = `/api/creator/${userSlug}/`;
    return axios.get(USER_PROFILE).then(response =>             response.data);
};
const { userSlug } = router.query;
const { data } = useSWR(userSlug, getUserProfile, {
        initialData: initialUserProfile,
});