Next.js App Router で Client Component を SSR する時に Cookie にアクセスできない問題

これは "常識" なのですが、client component も SSR される

'use client' は Server Component じゃないよという意味で、SSR はする

client component を SSR する時に Cookie など Request オブジェクトにアクセスできない

= SSR 時にユーザー Cookie や Authorization Header を利用して外部 API を叩いたりできない

ないわけないだろと思ったが無い

RSC, SSR, Browser 3つのコンテキストで動くようにするのツラい

RSC | SSR, Browser ← ここに線を引くぐらいで済ませたいのに現実は甘くない

SSR が Browser に近づいてよりピュアになったとも見れる

従来の、Context に入れた GraphQL Client で、認証が必要な API を叩いてデータを取得し、Props やレスポンスに焼き込んで続きをクライアントサイドでやる、という典型的な仕組みと噛み合わない

ないわけないだろと思って質問する気持ちは分かる

この話へのコメントで "常識" をわかってる人あんま居ない

Server Component で Context 使えないけど、子に Provider 置いて値を渡すことはできる

RSC で Cookie 読み出して Provider に渡す、Client Component (SSR) で読み出して使う

Cookie 自体は参照できるようになる、なるのだが httpOnly な Cookie がページ中に含まれうるのでセキュアじゃないと思う

まあ、こうしてまで渡したい Cookie というのは認証情報なんです

vercel/next.js 上での Discussion

Apollo で SSR している人もまあ困りそう、気持ちは一つだよ

apollo-client-nextjs でコメントされていた hack

RSC → SSR に Cookie を引き回すのだが、暗号化する

環境変数に含めたキーでデコードして使う、環境変数はサーバーサイド実行では読めるがクライアントでは(NEXT_PUBLIC_ を付けない限り)読めない

やる気が出たら urql のほうに Issue 立てる