预请求数据

顶级页面数据

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

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

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

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

手动预请求

SWR 提供 preload API 来以编程方式预加载资源并将结果存储在缓存中。preload 接受 key 和 fetcher 作为参数。

你甚至可以在React之外调用 preload。

import { useState } from 'react'
import useSWR, { preload } from 'swr'
 
const fetcher = (url) => fetch(url).then((res) => res.json())
 
// 在渲染下面的用户组件之前预加载资源，
// 这可以防止应用程序中出现潜在的网络请求瀑布。
// 您也可以在鼠标悬停在按钮或链接上时开始预加载。
preload('/api/user', fetcher)
 
function User() {
  const { data } = useSWR('/api/user', fetcher)
  ...
}
 
export default function App() {
  const [show, setShow] = useState(false)
  return (
    <div>
      <button onClick={() => setShow(true)}>Show User</button>
      {show ? <User /> : null}
    </div>
  )
}

在 React 渲染树中，preload也可以在事件处理或 effects 中使用。

function App({ userId }) {
  const [show, setShow] = useState(false)
 
  // 在 effects 中预加载
  useEffect(() => {
    preload('/api/user?id=' + userId, fetcher)
  }, [userId])
 
  return (
    <div>
      <button
        onClick={() => setShow(true)}
        {/* 在事件回调中预加载 */}
        onHover={() => preload('/api/user?id=' + userId, fetcher)}
      >
        Show User
      </button>
      {show ? <User /> : null}
    </div>
  )
}

配合 Next.js 的页面预加载 (opens in a new tab)，你将能立即加载下一页和数据。

在 Suspense 模式下，你应该利用preload来避免网络请求瀑布问题。

import useSWR, { preload } from 'swr'
 
// 在渲染前执行
preload('/api/user', fetcher);
preload('/api/movies', fetcher);
 
const Page = () => {
  // 下面的 useSWR 钩子会暂停渲染，但是对 `/api/user` 和 `/api/movies` 的请求已经由 `preload` 启动，
  // 因此不会出现网络请求瀑布。
  const { data: user } = useSWR('/api/user', fetcher, { suspense: true });
  const { data: movies } = useSWR('/api/movies', fetcher, { suspense: true });
  return (
    <div>
      <User user={user} />
      <Movies movies={movies} />
    </div>
  );
}

数据预填充

如果你想在 SWR 缓存中预填充已经存在的数据，你可以使用 fallbackData 选项，例如：

useSWR('/api/data', fetcher, { fallbackData: prefetchedData })

当 SWR 还没有获取此次数据的时候，这个 hook 将返回 prefetchedData 作为 fallback 。

你也可以为所有的 SWR hooks 和不同的 key 配置 <SWRConfig> 和它的 fallback 选项。查看 Next.js SSG 和 SSR 了解更多详细信息。

订阅 Next.js SSG 和 SSR