# How can I share my Vercel cache across deployments?

**Author:** Lee Robinson

---

When fetching data from external sources like a database or CMS, it can be beneficial to prevent re-fetching the same data if it has not changed by utilizing caching. This guide will explain how to use the Next.js App Router and the Vercel Data Cache to persist cached data across deployments.

## Requirements

To cache data and share responses across deployments, you must currently use the Next.js App Router (latest version recommended). You cannot share the cache between different projects.

### Next.js App Router

The [Next.js App Router](https://nextjs.org/docs/app) (`app/`) provides more [fine-grained control](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) over fetching, caching, and revalidating your data. For example, you can fetch and cache data (using [`fetch`](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch) or your favorite library) and [revalidate](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) the data by cache tag or path by defining a [stale time](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#time-based-revalidation) or [programmatically purging](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation) the cache.

### Vercel Data Cache

The [Vercel Data Cache](https://vercel.com/docs/infrastructure/data-cache) is a specialized, granular cache for storing responses from fetches while using modern frontend frameworks like [Next.js](https://vercel.com/docs/frameworks/nextjs). It's a shared cache, meaning users of the same project share the same cache.

Frameworks that integrate with the Data Cache (currently Next.js) can cache data per fetch instead of per route. This means you can have static, dynamic, and revalidated data together in the same route.

## Example

Inside your Next.js application, fetch and tag your data with a cache key:

`async function Blog() { const res = await fetch('https://api.vercel.app/blog', { next: { tags: ['blogs'] } }); const blogs = await res.json(); return '...'; }`

The response from `fetch` will be cached and not re-fetched on the next deployment. Instead, to revalidate the data and purge the cache, you can use `revalidateTag`:

`'use server' import { revalidateTag } from 'next/cache' export default async function action() { revalidateTag('blogs') }`

---

[View full KB sitemap](/kb/sitemap.md)