Làm sao để persist và hydrate state?

Question

Accepted Answer

**Persist** state nghĩa là lưu nó vào storage (localStorage, IndexedDB, một backend) để nó tồn tại qua các lần reload trang hoặc các phiên; **hydrate** nghĩa là load nó trở lại vào app lúc khởi động. Phổ biến cho giỏ hàng, auth token, tùy chọn người dùng, và bản nháp form.

## Persist + hydrate cơ bản với localStorage

```jsx
function useCart() {
  // HYDRATE: khởi tạo từ storage (lazy initializer chạy một lần)
  const [cart, setCart] = useState(() => {
    try {
      const saved = localStorage.getItem("cart");
      return saved ? JSON.parse(saved) : [];      // parse JSON đã lưu
    } catch {
      return [];                                   // phòng dữ liệu hỏng
    }
  });

// PERSIST: ghi vào storage mỗi khi nó thay đổi
  useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(cart));
  }, [cart]);

return [cart, setCart];
}
```

Hai nửa: đọc-và-parse lúc init (hydrate), và serialize-và-ghi khi thay đổi (persist).

## Hỗ trợ từ thư viện

```js
// persist middleware của Zustand — tự động persist + hydrate
const useStore = create(persist((set) => ({ ... }), { name: "app-store" }));

// redux-persist cho Redux; cả hai xử lý serialization + rehydration
```

## Chọn storage

```text
localStorage  → đơn giản, đồng bộ, ~5–10MB, chỉ chuỗi (JSON) — tùy chọn, state nhỏ
sessionStorage→ như localStorage nhưng bị xóa khi đóng tab
IndexedDB     → dữ liệu lớn/có cấu trúc, async — app offline, cache lớn
Cookies       → gửi tới server; cho auth (httpOnly vì bảo mật)
Backend       → đồng bộ đa thiết bị, source of truth cho dữ liệu quan trọng
```

## Các lưu ý quan trọng

```text
⚠️ Lệch SSR: localStorage không tồn tại trên server → phòng bằng typeof window,
   và cẩn thận lệch hydration giữa state render trên server và client.
⚠️ Versioning/migration: hình dạng đã lưu có thể khác code mới → đánh version và migrate.
⚠️ Đừng persist dữ liệu nhạy cảm (token) trong localStorage (đọc được qua XSS) — ưu tiên httpOnly cookie.
⚠️ Đừng persist server state có thể refetch (để React Query lo caching).
⚠️ Validate/phòng lúc hydrate — dữ liệu đã lưu có thể cũ hoặc hỏng.
```

## Tại sao điều này quan trọng

Persistence mang lại giá trị UX thực sự — giỏ hàng tồn tại qua reload, tùy chọn và bản nháp không bị mất, người dùng vẫn đăng nhập.

Nhưng triển khai ngây thơ đưa vào các vấn đề tinh vi, nghiêm trọng: lệch hydration SSR, dữ liệu cũ/hỏng, vỡ migration schema, và **rủi ro bảo mật** (persist token trong storage đọc được qua XSS).

Biết pattern persist/hydrate, chọn đúng storage cho dữ liệu, và tôn trọng các lưu ý (phòng SSR, đánh version schema, đừng lưu bí mật không an toàn, đừng persist server state có thể refetch) là điều khiến persistence bền vững thay vì là nguồn của các bug khó chẩn đoán.