!!col

• 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.

!!col

async function getProductPrice(id: string) {
  // !mark
  'use cache: remote';
  cacheTag(`price-${id}`);
  return await db.query(...);
}

async function ProductPrice({ id }: { id: string }) {
  // Ensure dynamic context
  await connection();
  const price = await getProductPrice(id);
  return <div>Price: ${price}</div>;
}

export default async function Page() {
  return (
    <Suspense fallback={<Skeleton />}>
      <ProductPrice id="1" />
    </Suspense>
  );
}