なぜReact Server ComponentsはlocalStorageを参照できず、cookieは可能なのか
はじめに
Next.jsでApp Routerを本格的に触り始めました。
Server Components(以下SC)に関してはここでは詳細に説明しませんが、サーバー上で実行されるコンポーネントです。バンドルサイズの縮小や起動時間の短縮などが期待されたりする恩恵があります。
そんな中でcookieをSCから呼び出すためのfunctionが用意されています。
私としてはlocalStorageでデータを保存してSCから呼び出したかったのですが、どうやらそれができないみたいでした。🤔
なぜcookieは取得できて、localStorageは取得できないのでしょうか？
そもそもcookieとlocalStorageの違いとは？
cookieとlocalStorageの大きな違いとは、ブラウザでデータを保存するためのメカニズムが異なる点です。
cookieは、サーバーからのHTTPレスポンスに含まれる情報であり、ブラウザに保存されます。cookieは、ブラウザが同じサーバーに対して後続のリクエストを送信する際に、サーバーに対して情報を提供するために使用されます。また有効期限やドメインの制約などの設定を持つことができたり、セキュアフラグを設定することでHTTPS接続のみでcookieを送信するようにすることもできます。
一方、localStorageは、ブラウザにデータを保存するためのクライアントサイドのただのストレージです。localStorageは、キーと値のペアを保存することができ、JavaScriptを使用してデータの読み書きができます。ただし、localStorageに保存されたデータは、同じドメイン内のすべてのページで共有されます。
cookieはHTTPリクエストとレスポンスの一部として送信されますが、localStorageはブラウザ内でのみアクセス可能です。
ServerComponentsではなぜlocalStorageが取得できないのか
ブラウザにデータを保存するためのクライアントサイドのただのストレージだからです。サーバー側から取得することはできません。
そもそもSCとは仮想DOMを返却するHTTPリクエストです。コンポーネントをアクセスするとサーバにHTTPリクエストを送信して、サーバから仮想DOMをレスポンスとして受けとるような仕組みです。そのリクエスト内容にはもちろんlocalStorageの情報は渡していません。
参照: https://qiita.com/naruto/items/c17c79ec5c2a0c7c4686
この図がわかりやすかったので使わせていただきます🙇
ではなぜcookieが取得できるのか
SCをリクエストする際に、cookieを渡していることが予想できます。
そのリクエスト内容をcookies()のget関数などで取得できるようになっているのかなと。
(詳しい方いたら教えてください！)
参考
Discussion