Skip to content

Prefetching Data

There’re many ways to prefetch the data for SWR. For top level requests, rel="preload" is highly recommended:

<link rel="preload" href="/api/data" as="fetch" crossorigin="anonymous">

This will prefetch the data before the JavaScript starts downloading. And your incoming fetch requests will reuse the result (including SWR, of course).

Another choice is to prefetch the data conditionally. You can have a function to refetch and set the cache via mutate:

function prefetch () {
mutate('/api/data', fetch('/api/data').then(res => res.json()))
// the second parameter is a Promise
// SWR will use the result when it resolves
}

Then use it when you need to preload the resources (for example when hovering a link).

Together with techniques like page prefetching in Next.js, you will be able to load both next page and data instantly.