คุณจะเก็บและไฮเดรตสถานะอย่างไร?

Question

Accepted Answer

**เก็บถาวร** สถานะหมายถึงการบันทึกลงในที่เก็บ (localStorage, IndexedDB, backend) เพื่อให้สามารถอยู่รอดจากการโหลดหน้าใหม่หรือเซชัน; **ไฮเดรต** หมายถึงการโหลดกลับเข้าไปในแอปพลิเคชันเมื่อเริ่มต้น มักใช้สำหรับตะกร้า โทเค็นการตรวจสอบสิทธิ ชื้นชอบของผู้ใช้ และแบบฟอร์มร่าง

## การเก็บถาวรพื้นฐาน + ไฮเดรตด้วย 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];
}
```

สองส่วน: อ่านและแยกวิเคราะห์เมื่อเริ่มต้น (ไฮเดรต) และจัดลำดับและเขียนเมื่อมีการเปลี่ยนแปลง (เก็บถาวร)

## การสนับสนุนไลบรารี

```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 จัดเวอร์ชันสคีมา อย่าเก็บข้อมูลลับอย่างปลอดภัย อย่าเก็บสถานะเซิร์ฟเวอร์ที่สามารถดึงข้อมูลใหม่ได้) คือสิ่งที่ทำให้การเก็บถาวรมั่นคงแทนที่จะเป็นแหล่งของข้อบกพร่องที่ยากต่อการวินิจฉัย