预请求数据
顶级页面数据
有很多方法可以为 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 了解更多详细信息。