Cache and dedupe async fetches per request. Data cache with tag revalidation.
import { unstable_cache } from 'next/cache';
const getCachedList = unstable_cache(
async () => {
const res = await fetch('https://api.example.com/items');
return res.json();
},
['items-list'],
{ revalidate: 60, tags: ['items'] }
);
export default async function Page() {
const items = await getCachedList();
return <ul>{items.map((i: { id: string; name: string }) => <li key={i.id}>{i.name}</li>)}</ul>;
}
// Revalidate by tag: revalidateTag('items')
Wrap an async function. First argument is the fetcher, second is key parts (array), third is options: revalidate (seconds) and tags.
Call revalidateTag('items') from a server action or route to invalidate all caches with that tag.
revalidateTag('items');