Remote Cache

1
async function getProductPrice(id: string) {
2
  'use cache: remote';
3
  cacheTag(`price-${id}`);
4
  return await db.query(...);
5
}
6

7
async 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

14
export 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

• This demo uses the experimental use cache directive and describes caching behavior once stable.
• use cache: remote is essential for caching in dynamic contexts where regular use cache won't work.