Im confused about cache while using cookies in the same route for something different, i feel docs doesn't explain this so i decided to ask here:


What would happen on this first code snippet? (everything by default):

import { cookies } from "next/headers";

export default async function Page() {
  const cookieStore = cookies();
  const userToken = cookieStore.get("token")?.value ?? "token not found";

  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return (
    <main>
      <p>Token is: {userToken}</p>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  );
}

What would happen on this second one? (force cache)

import { cookies } from "next/headers";

export default async function Page() {
  const cookieStore = cookies();
  const userToken = cookieStore.get("token")?.value ?? "token not found";

  const res = await fetch("https://api.example.com/data", {
    cache: "force-cache",
  });
  const data = await res.json();

  return (
    <main>
      <p>Token is: {userToken}</p>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  );
}

What about this? (force cache with revalidate). I tink by forcing cache, revalidate is not used, but not sure btw:

import { cookies } from "next/headers";

export default async function Page() {
  const cookieStore = cookies();
  const userToken = cookieStore.get("token")?.value ?? "token not found";

  const res = await fetch("https://api.example.com/data", {
    cache: "force-cache",
    next: { revalidate: 60 },
  });
  const data = await res.json();

  return (
    <main>
      <p>Token is: {userToken}</p>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  );
}