SWR 订阅是一种常用的数据缓存方案,它可以让我们在 Next.js 应用中分发请求,并在组件渲染时自动更新数据。以下是一个示例:
import useSWR from 'swr';
function Profile() {
const { data, error } = useSWR('/api/user', fetcher);
if (error) return Failed to load;
if (!data) return Loading...;
return User Name: {data.name};
}
// fetcher 函数可以从 API 获取数据
async function fetcher(url) {
const res = await fetch(url);
const data = await res.json();
return data;
}
在这个示例中,useSWR
钩子获取了 /api/user
的数据,并缓存了它。每当 Profile
组件重新渲染时,useSWR
将返回缓存的数据,直到数据被更新为止。这个思路可以应用于任何数据获取和更新的场景中。