# Runtime Cache

Runtime Cache is available on [all plans](/content/docs/plans/index.html).

Runtime cache is a regional, ephemeral cache you can use for storing and retrieving data across Vercel Functions, Routing middleware, and build execution within a Vercel region. It lets you cache data close to where your code runs, reduce duplicate work, and control invalidation with TTLs and tags.

Runtime cache may not share the same cache between build time and runtime depending on whether the region where the build executed matches the runtime region.

- Find out [how runtime cache works](/content/docs/caching/runtime-cache#how-runtime-cache-works/index.html)
- [When to use it](/content/docs/caching/runtime-cache#when-to-use-runtime-cache/index.html)
- Get started with the [framework-specific examples](/content/docs/caching/runtime-cache#using-runtime-cache/index.html)

For caching complete HTTP responses (entire pages, API responses) in Vercel regions, see [CDN cache](/content/docs/caching/cdn-cache/index.html). For caching build artifacts, see [Remote cache](/content/docs/monorepos/remote-caching/index.html).

## [When to use runtime cache](/content/docs/caching/runtime-cache#when-to-use-runtime-cache/index.html)

Runtime cache is best when your functions fetch the same data multiple times or perform expensive computations that can be reused, such as in the following scenarios:

- API calls that return the same data across multiple requests
- Database queries that don't change frequently
- Expensive computations you want to reuse
- Data fetching in server components or API routes

Runtime cache is not a good fit for:

- User-specific data that differs for each request
- Data that must be fresh on every request
- Data that must be retained for its full TTL (entries may be evicted sooner if the cache reaches its storage limit)
- Complete HTTP responses (use [CDN cache](/content/docs/caching/cdn-cache/index.html) instead)

## [How runtime cache works](/content/docs/caching/runtime-cache#how-runtime-cache-works/index.html)

Runtime cache stores data in a non-durable cache close to where your function executes. Each [region](/content/docs/regions/index.html) where your function runs has its own cache, allowing reads and writes to happen in the same region for low latency. It has the following characteristics:

- Regional: Each region has its own cache
- Isolated by environment: Each deployment environment (`preview` and `production`) uses its own cache, so they never share cached data
- Scoped by plan: On Pro and Enterprise, each project uses its own cache. On Hobby, all projects in your team share a single cache. See [storage scope by plan](/content/docs/caching/runtime-cache#storage-scope-by-plan/index.html)
- Persistent across deployments: Cached data persists across deployments and can be invalidated through time-based expiration or by calling `expireTag`
- Ephemeral: Each cache has a storage limit. When a cache reaches this limit, Vercel evicts (removes) the entries that haven't been accessed recently to free up space for new entries
- Automatic: When runtime cache is enabled, Vercel handles caching for you
- Framework-agnostic: Works with all frameworks

The cache sits between your function and your data source, reducing the need to repeatedly fetch the same data. See [limits and usage](/content/docs/caching/runtime-cache#limits-and-usage/index.html) for information on item size, tags per item, and maximum tag length.

## [Using runtime cache](/content/docs/caching/runtime-cache#using-runtime-cache/index.html)

You can cache your Vercel function with any framework by using the functions of the helper method [`getCache`](/content/docs/functions/functions-api-reference/vercel-functions-package#getcache/index.html).

### [Runtime cache with any framework](/content/docs/caching/runtime-cache#runtime-cache-with-any-framework/index.html)

This example caches data fetched from the API so that it expires after 1 hour and adds a tag to the cache entry so you can invalidate it later from code:

```javascript
import { getCache } from '@vercel/functions';

export default {
  async fetch(request) {
    const cache = getCache();

// Get a value from cache
    const value = await cache.get('somekey');

if (value) {
      return new Response(JSON.stringify(value));
    }

const res = await fetch('https://api.vercel.app/blog');
    const originValue = await res.json();

// Set a value in cache with TTL and tags
    await cache.set('somekey', originValue, {
      ttl: 3600, // 1 hour in seconds
      tags: ['example-tag'],
    });

return new Response(JSON.stringify(originValue));
  },
};
```

### [Next.js 16 and above](/content/docs/caching/runtime-cache#next.js-16-and-above/index.html)

With Next.js 16, you can cache data at runtime in two ways:

- `use cache: remote`: A directive that caches entire functions or components with Runtime cache. Requires enabling `cacheComponents` in your config.
- `fetch` with `force-cache`: Caches individual fetch requests without additional configuration with [Data cache](/content/docs/caching/runtime-cache/data-cache/index.html).

### [Using use cache: remote](/content/docs/caching/runtime-cache#using-use-cache:-remote/index.html)

Use the `use cache: remote` directive at the file, component, or function level to cache the output of a function or component.

```javascript
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;
```

Then, use the `use cache: remote` directive in your code. This example caches data so that it expires after 1 hour and adds a tag to the cache entry so you can invalidate it later from code:

```javascript
import { cacheLife, cacheTag } from 'next/cache';

export default async function Page() {
  const data = await getData();

return (
    <main>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  );
}

async function getData() {
  'use cache: remote'
  cacheTag('example-tag')
  cacheLife({ expire: 3600 }) // 1 hour

const response = await fetch('https://api.example.com/data');
  return response.json();
}
```

## [Revalidation](/content/docs/caching/runtime-cache#revalidation/index.html)

You can control how long data stays cached using the following revalidation options:

### [Time-based revalidation](/content/docs/caching/runtime-cache#time-based-revalidation/index.html)

This example revalidates the cache every hour:

```javascript
import { cacheLife } from 'next/cache';

export async function GET() {
  const data = await getProducts();
  return Response.json(data);
}

async function getProducts() {
  'use cache: remote'
  cacheLife({ expire: 3600 }) // 1 hour

const response = await fetch('https://api.example.com/products');
  return response.json();
}
```

### [Limits and usage](/content/docs/caching/runtime-cache#limits-and-usage/index.html)

| Runtime Cache property | Limit |
| --- | --- |
| Item size | 2 MB |
| Tags per item | 128 tags |
| Maximum tag length | 256 bytes |

TTL and tag updates aren't reconciled between deployments. If you need to update cache behavior after a deployment, purge the runtime cache or modify the cache key.