【ITニュース解説】State Hydration & Persisted State in Nuxt with Pinia

ウェブサイトを構築する際、高い性能と検索エンジンからの評価を得るために、サーバーサイドレンダリング（SSR）という技術がしばしば利用される。Nuxtのようなフレームワークを使えば、ユーザーがウェブサイトにアクセスした際、サーバーがページの初期表示に必要なHTMLを生成し、それをブラウザに送信する。この方法だと、ページが素早く表示され、見た目にも良い印象を与え、検索エンジンにも内容が伝わりやすくなる利点がある。

しかし、SSRを使った開発では、「状態ハイドレーション」という概念を理解する必要がある。サーバーから送られてきたHTMLは、いわば静的な骨組みに過ぎない。この静的なHTMLに、ボタンが押されたら何かが起こる、データが変わったら表示も変わるといった、アプリケーションとしての動的な振る舞い（リアクティビティ）を付与するには、ブラウザ側でJavaScriptが動作する必要がある。この「静的なHTMLにJavaScriptの機能と、その時に必要なデータを紐づけて、ウェブアプリケーションとして完全に起動させる」一連のプロセスをハイドレーションと呼ぶ。

ここで問題となるのが、サーバー側でHTMLが生成された時点でのアプリケーションの状態と、クライアント側でJavaScriptがハイドレーションを行う際に引き継ぐべき状態が、何らかの原因で食い違ってしまうことだ。これを「ハイドレーションミスマッチ」と呼ぶ。このミスマッチが発生すると、ウェブサイトの見た目が一瞬ちらついたり、一部のボタンや機能が正しく動作しなかったり、最悪の場合、Vueというフレームワークから「Hydration completed but contains mismatches」といった警告が表示され、アプリケーションが不安定になる原因となる。

ハイドレーションミスマッチが起きる具体的な原因はいくつかある。一つは、ブラウザ専用の機能（API）をサーバーの環境で使ってしまうケースだ。例えば、ユーザーの設定などをブラウザに保存するlocalStorageという機能は、その名の通りブラウザでのみ利用できる。サーバー環境でlocalStorageにアクセスしようとすると、存在しないためエラーになったり、期待しない初期値でHTMLが生成されたりする。その後、クライアント側でアプリケーションが起動すると、localStorageから正しい値が読み込まれ、サーバーが生成した値と異なるため、ミスマッチが発生してしまう。

二つ目は、サーバーとクライアントで結果が変わる可能性がある「非決定的なデータ」を使用することだ。例えば、現在の時刻を取得するDate.now()や、ランダムな数字を生成するMath.random()といった関数をアプリケーションの状態に直接組み込むと、サーバーでHTMLが生成された時点と、クライアントでハイドレーションされる時点とで結果が異なる可能性がある。このようなデータの違いが、そのままミスマッチにつながってしまう。

三つ目は、ウェブサイト内の別のページに移動（ナビゲーション）した際に、アプリケーションの重要な「状態」が失われてしまうことだ。ユーザーのログイン情報、ショッピングカートに入れた商品のデータ、特定の表示設定（例：ダークテーマ）などは、ページが変わっても保持されてほしい情報だ。もしこれらの状態がページ遷移のたびにリセットされてしまうと、ユーザーは毎回ログインし直したり、カートの中身が消えたりしてしまい、非常に使い勝手の悪いアプリケーションになってしまう。

これらの状態管理に関する課題を解決し、Nuxtアプリケーションをより安定させるために、「Pinia」という状態管理ライブラリが非常に有効だ。NuxtはPiniaとの連携を強力にサポートしており、@pinia/nuxtという専用のモジュールを導入するだけで、サーバーとクライアント間でアプリケーションの状態を自動的にやり取りしてくれる。具体的には、サーバーで準備された状態を、ブラウザでJavaScriptが引き継ぎやすい形式に変換し（シリアライズ）、ブラウザで元の状態に戻す（デシリアライズ）処理を、開発者が意識することなく行ってくれる。

特に、ページ遷移後も状態を保持する「永続化」については、Pinia自体には標準機能として備わっていないが、pinia-plugin-persistedstateという便利なプラグインを追加することで簡単に実現できる。このプラグインをNuxtアプリケーションに導入し、Piniaストアの定義にpersist: trueという簡単な設定を追加するだけで、そのストアの状態は自動的にブラウザのlocalStorageに保存される。これにより、ユーザーがページを再読み込みしたり、サイト内を移動したりしても、ログイン状態や設定、カートの内容といった重要なデータが失われることなく維持される。ただし、このプラグインはブラウザ環境で動作するため、サーバー側でのみ必要な状態には適用しないように注意が必要だ。

ハイドレーションミスマッチを未然に防ぎ、アプリケーションの状態を安全に管理するためには、「TypeScript」を活用することも非常に効果的だ。TypeScriptを使うことで、Piniaストアの状態を定義する際に、サーバーとクライアントのどちらの環境でも問題なく使える「安全な初期値」を明確に指定できる。例えば、ブラウザでのみlocalStorageから読み込むようなデータ（例：カートの内容）は、サーバーがHTMLを生成する時点では、空の配列やデフォルト値として設定し、安全な状態を保つようにする。

また、ブラウザでしか実行できない処理を行う際には、必ずprocess.clientという特別な目印を使って条件分岐を行うことが極めて重要だ。if (process.client)というコードブロックの中に、localStorageへのアクセスやその他のブラウザ専用APIを使うコードを記述することで、そのコードがサーバーでは実行されず、クライアント側でのみ実行されることを保証できる。これにより、サーバーでの予期せぬエラーを防ぎ、サーバーとクライアント間での値のずれを回避できる。例えば、localStorageからカートのデータを読み込む処理は、アプリケーションがクライアント側で完全に起動した後、「アクション」と呼ばれる機能を通じて行うように設計すると良い。

これらの知識と技術を総合的に活用することで、NuxtのようなSSRフレームワークを使ったウェブアプリケーション開発において、「状態ハイドレーション」の複雑な課題に効果的に対処できる。PiniaとNuxtの連携機能、そしてpinia-plugin-persistedstateのようなプラグインを適切に利用することで、アプリケーションの状態の一貫性と永続性を確保できる。さらに、TypeScriptによる厳密な型付けと、process.clientを使った適切な条件分岐により、ハイドレーションミスマッチを未然に防ぎ、より安定して信頼性の高いアプリケーションを構築することが可能になる。もし将来、Vueからの「Hydration completed but contains mismatches」という警告メッセージに遭遇した場合は、Piniaストアの初期化や状態の永続化設定を確認することが、問題解決への重要な手がかりとなるだろう。