[Next.js] サーバーコンポーネントでcookieを使える理由

疑問

Nextで開発中、next/headerのcookieを利用して、ブラウザに値を保存するような実装をしていました。

その時はサーバーコンポーネントを使っていたのですが、ふと、どうしてサーバーコンポーネントでもcookieを使うことができるのか、という疑問が湧いてきました。

なぜならcookieはブラウザでデータを保存しておく仕組みであり、サーバーには持ち越せないと思っていたからです。

cookieの仕組み

そもそもcookieは、ブラウザで値を保存しておく仕組みではありますが、ブラウザがリクエストを送るときに、勝手にcookieをリクエストヘッダーに含めてくれる、とのことでした。

GET /dashboard HTTP/1.1
Host: example.com
Cookie: session_id=abc123; theme=dark

Next.jsのドキュメントにも書いていましたし、cookieという仕組み自体を誤認していました。

cookies is an async function that allows you to read the HTTP incoming request cookies in Server Components, and read/write outgoing request cookies in Server Actions or Route Handlers.

（https://nextjs.org/docs/app/api-reference/functions/cookies)

なぜリクエストヘッダーに含めてくれるの?

では、なぜcookieはリクエストヘッダーに含まれるのでしょう？

それは、ユーザーの状態（セッション情報など）をクライアントからサーバーに送るため、です。

WEBで使われるHTTPというプロトコルは基本的に「ステートレス（状態を持たない）」ものなので、例えば、Aというユーザーが現在ログインをしているかどうか、という状態は、一回一回リクエストに含めなければ、サーバーは認識することができません。

ログインしているユーザーのみが見れる情報、にアクセスするためには、ブラウザがログインしているかどうかを記憶し、サーバーにリクエストを送る際に、ログイン状態であることを示す必要があります。

そのため、cookieはリクエストヘッダーに自動的に含まれている、というわけです。

まとめ

cookieが自動でサーバーに送られる情報だからこそ、サーバーコンポーネントでもcookieの中のデータを取り出して表示することができた、というわけでした。

考えてみれば当たり前で、WEBの基本部分ではありましたが、実際に問題に直面し、「なぜ」を考えてみることでより理解が深まった気がします。