Demo

Remote Cache

Use use cache: remote when the cache key depends on something private or dynamic, or it's always accessed after dynamic data is read.
Regular use cache will not cache in dynamic contexts (after await connection(), await cookies(), await headers(), etc.).
use cache: remote caches at runtime in a remote cache, reducing origin load even in dynamic contexts.
Perfect for user-specific data, frequently changing data, or data accessed per-request.

app/page.tsx

1async function getProductPrice(id: string) {
2  'use cache: remote';
3  cacheTag(`price-${id}`);
4  return await db.query(...);
5}
6
7async function ProductPrice({ id }: { id: string }) {
8  // Ensure dynamic context
9  await connection();
10  const price = await getProductPrice(id);
11  return <div>Price: ${price}</div>;
12}
13
14export default async function Page() {
15  return (
16    <Suspense fallback={<Skeleton />}>
17      <ProductPrice id="1" />
18    </Suspense>
19  );
20}

Demo

Product data is fetched with use cache in getData() - cached in the static shell.
Price data is fetched with use cache: remote in getProductPrice() - accessed after await connection(), so it's cached in a remote cache at runtime.
Each price component calls await connection() to ensure it's never included in the static shell.
The price data function uses cacheTag() for targeted cache invalidation.
Artificial delays (1s for products, 1s for prices) make caching behavior visible.
Notice how product data loads once, while price data streams in per product, but is cached for subsequent requests.

Notes

use cache: remote stores cache entries in a distributed cache layer, enabling cache sharing across edge locations.
This directive is essential for caching in dynamic contexts where regular use cache would not apply.