Keep cookies() out of cacheKeep cookies() out of cache

Pass the session in

Pick a session, request twice, then switch the directive.

async function CachedProfile() {
  'use cache'
  const s = (await cookies()).get('session')
  return <div>{(await fetchUserData(s)).name}</div>
}

import { cookies } from 'next/headers'

export default async function ProfilePage() {
  const session = (await cookies()).get('session')?.value
  return <CachedProfile sessionId={session} />
}

async function CachedProfile({ sessionId }: { sessionId?: string }) {
  'use cache'
  const user = await fetchUserData(sessionId)
  return <div>{user.name}</div>
}

Closures are part of the key

Render as Ana, switch to Ben, render again.

const getData = unstable_cache(
  async (filter) => db.users.find(userId, filter),
  ['user-data'],
  { tags: ['users'], revalidate: 60 }
)

const getData = async (filter) => {
  'use cache'
  return db.users.find(userId, filter)
}

import { cacheLife, cacheTag } from 'next/cache'

async function Component({ userId }: { userId: string }) {
  const getData = async (filter: string) => {
    'use cache'
    cacheTag('users')
    cacheLife({ revalidate: 60 })
    return db.users.find(userId, filter)
  }
  return <List items={await getData('active')} />
}

Random values run once

Request a few times, then Deploy in the toolbar.

async function RequestId() {
  'use cache'
  return { id: crypto.randomUUID(), at: Date.now() }
}

async function RequestId() {
  await connection()
  return { id: crypto.randomUUID(), at: Date.now() }
}

import { connection } from 'next/server'

async function RequestId() {
  await connection()
  const id = crypto.randomUUID()
  return <span>{id}</span>
}

Why it matters, pros and cons