Skip to content

预请求数据

Top-Level Page Data(顶级页面数据)

有很多方法可以为 SWR 预请求数据。对于顶级请求，强烈推荐 rel="preload"

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

只需把它放在HTML的 <head> 里即可。简单、快速、原生。

它将在 HTML 加载时预请求数据，甚至是在 JavaScript 开始下载之前。使用相同 URL 的所有传入 fetch 请求都将重用结果(当然包括SWR)。

Programmatically Prefetch(编程方式预请求)

有时，你想有条件地预加载资源。比如当用户 hovering a link 时预加载数据。最直观的方法就是用全局的 mutate 重新请求和设置缓存：

另一个选择是有条件地预请求数据。你可以通过 mutate 来重新请求以及设置缓存：

import { mutate } from 'swr'
function prefetch () {
  mutate('/api/data', fetch('/api/data').then(res => res.json()))
  // 第二个参数是个 Promise
  // SWR 将在解析时使用结果
}

配合 Next.js 的 page prefetching，你将能立即加载下一页和数据。