Skip to content

Prefetching Data

Top-Level Page 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">

Just put it inside your HTML <head>. It’s easy, fast and native.

It will prefetch the data when the HTML loads, even before JavaScript starts to download. All your incoming fetch requests with the same URL will reuse the result (including SWR, of course).

Programmatically Prefetch

Sometimes, you want to preload a resource conditionally. For example, preloading the data when the user is hovering a link. The most inituitive way is to have a function to refetch and set the cache via the global mutate:

import { mutate } from 'swr'
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

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