Hydrogen での cookie の利用方法

日本語 ディスカッション 技術的なQ＆A

Topic summary

Hydrogen を用いたカスタムストアで、ブラウザに既存の cookie を読み取りたいという相談。document.cookie を使うと「document が定義されていない」エラーが発生し、クライアントコンポーネント（xxx.client.jsx）でも同様。公式の Cookie ドキュメントは新規登録向けで、既存 cookie の読み取り方法は示されていない。

中心論点：Hydrogen 環境（SSR を含む）で、登録済み cookie をどのように読むか。

更新点・提案：Hydrogen 固有の解決策は提示されていないが、SSR での「document is not defined」対策として、document 使用前に存在チェックを行う方法が紹介。例: if (typeof document !== ‘undefined’) { /* cookie 処理 */ }。参考記事（Qiita）のリンクあり。

補足：SSR（Server-Side Rendering）では document が未定義のため、ブラウザ側でのみ実行するガードが必要。

結論・状態：具体的な Hydrogen での既存 cookie 読み取り手順は未解決。議論は継続中。

Summarized with AI on February 12. AI used: gpt-5.
1

お世話になります。

現在 Hydrogen をつかってカスタムフロントショップの実装を進めており、cookie を使った処理をしたいと考えております。

通常の javascript で cookie を扱うように document.cookie で cookie を読み取ろうと試してみたのですが、 document が定義されていないとのエラーが発生してしまい cookie を利用することができませんでした。

上記はクライアントサイドでレンダリングされるコンポーネント（xxx.client.jsx のコンポーネント）で実行しても同様のエラーが発生してしまいました。

Hydrogen のドキュメントに cookie のページがありましたが、こちらはブラウザに登録済みの cookie を読み取る方法ではなく新たに cookie を登録する方法のようで、今回は利用できなさそうでした。

https://shopify.dev/api/hydrogen/components/framework/cookie

Hydrogen においては、どのように登録済み cookie を読み取るのでしょうか？

ご存知でしたらご教示いただけると幸いです。

よろしくお願いいたします。

2

Sohosoki 様

はじめまして。

株式会社フルバランスのドウケと申します。

Hydrogenを使用したことがなく恐縮なのですが、

Next.js使用時「document is not defined」のエラーに遭遇のしたことがありますので、ご参考までに。

https://qiita.com/syu_ikeda/items/ea1e6931643aa812e6a2

本記事記載のとおり、document使用前に、存在判定を行うことで解決するかもしれません。

if (typeof document !== 'undefined') {
    // documentに係る処理
  }