状態をどのように永続化とハイドレーションしますか?

Question

Accepted Answer

**永続化**とは、ページをリロードまたはセッションを経ても状態が存続するように、ストレージ（localStorage、IndexedDB、バックエンド）に状態を保存することです。**ハイドレーション**とは、スタートアップ時にそれをアプリに読み込み直すことです。買い物かご、認証トークン、ユーザー設定、下書きフォームなど、一般的に使用されます。

## localStorageを使った基本的な永続化とハイドレーション

```jsx
function useCart() {
  // HYDRATE: initialize from storage (lazy initializer runs once)
  const [cart, setCart] = useState(() => {
    try {
      const saved = localStorage.getItem("cart");
      return saved ? JSON.parse(saved) : [];      // parse stored JSON
    } catch {
      return [];                                   // guard against corrupt data
    }
  });

// PERSIST: write to storage whenever it changes
  useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(cart));
  }, [cart]);

return [cart, setCart];
}
```

この2つのステップ：初期化時に読み込んでパースする（ハイドレーション）、および変更時にシリアライズして書き込む（永続化）。

## ライブラリサポート

```js
// Zustand persist middleware — automatic persist + hydrate
const useStore = create(persist((set) => ({ ... }), { name: "app-store" }));

// redux-persist for Redux; both handle serialization + rehydration
```

## ストレージの選択

```text
localStorage  → simple, synchronous, ~5–10MB, strings only (JSON) — preferences, small state
sessionStorage→ like localStorage but cleared when the tab closes
IndexedDB     → large/structured data, async — offline apps, big caches
Cookies       → sent to server; for auth (httpOnly for security)
Backend       → cross-device sync, source of truth for important data
```

## 重要な注意事項

```text
⚠️ SSR mismatch: localStorage doesn't exist on the server → guard with typeof window,
   and beware hydration mismatches between server-rendered and client state.
⚠️ Versioning/migration: stored shape may differ from new code → version it and migrate.
⚠️ Don't persist sensitive data (tokens) in localStorage (XSS-readable) — prefer httpOnly cookies.
⚠️ Don't persist server state you can refetch (let React Query handle caching).
⚠️ Validate/guard on hydrate — stored data can be stale or corrupt.
```

## なぜ重要なのか

永続化は実際のUX価値を提供します—買い物かごはリロード後も残り、設定とドラフトは失われず、ユーザーはログインしたままになります。

しかし、単純な実装は微妙で深刻な問題をもたらします：SSRハイドレーションのミスマッチ、古い/破損データ、スキーママイグレーション破損、および**セキュリティリスク**（XSSで読み取り可能なストレージにトークンを永続化する）。

永続化/ハイドレーションパターンを理解し、データに適切なストレージを選択し、注意事項を守る（SSRから保護、スキーマをバージョン管理、秘密情報を安全でない方法で保存しない、再取得可能なサーバー状態を永続化しない）ことが、永続化を診断が難しいバグの原因ではなく堅牢にする鍵です。