React 狀態管理：Client State 與 Server State 的深度解析

搞懂 React 裡的狀態：Client State vs. Server State

在 React 開發的世界裡，狀態管理是打造高效、可擴展應用程式的關鍵。理解 Client State 和 Server State 之間的差異，以及如何有效地管理它們，對任何前端開發者來說都至關重要。

事件開頭短結論：Client State 處理 UI 相關的本地資料，而 Server State 則負責來自後端或 API 的資料。 選擇正確的工具，可以提升開發效率和使用者體驗。

Client State (客戶端狀態)

Client State 指的是在用戶端(瀏覽器)中管理和儲存的資料，這些資料與伺服器資料無關。 包括 UI 狀態、表單資料和其他短暫的資訊。 例如，像是目前彈出視窗是否可見、選單是否打開、使用者在輸入框中輸入了什麼等等。

在 React 中，你可以使用內建的 Hooks，如 useState 和 useReducer，或者使用狀態管理庫，像是 Redux 或 Zustand 來管理 Client State。

Server State (伺服器狀態)

Server State 指的是從外部伺服器或 API 獲取的資料。這些資料通常是動態的，且可能會頻繁變更，因此前端需要與後端保持同步。 這包括從後端服務或第三方 API 獲取的資料。 管理 Server State 涉及到處理資料獲取、快取和同步等問題。 與 Client State 不同的是，Server State 需要與伺服器保持同步，並且通常需要額外的工具來有效管理。

對於 Server State 的管理，React Query (現在稱為 TanStack Query) 是一個受歡迎的選擇。 它簡化了資料獲取、快取和同步，讓你的 UI 更具反應性。

那麼，要如何選擇呢？

• Client State: 適合 UI 相關的狀態，像是表單輸入、UI 開關狀態等等。
• Server State: 適合從 API 獲取的資料，像是使用者資訊、文章列表等。

個人心得：

理解 Client State 和 Server State 的區別，就像是了解了 React 應用程式的兩大核心支柱。 適當的工具選擇，可以讓你事半功倍。 例如，在處理線上支付時，你可能需要使用 Server State 來實時顯示支付狀態。而使用者介面的開關和狀態，則更適合使用 Client State。

事件重點：

• Client State: 處理本地資料，使用 useState、useReducer 或 Redux 等。
• Server State: 處理來自 API 的資料，使用 TanStack Query 等。
• 選擇正確的工具，可提升開發效率和使用者體驗。

參考閱讀

• https://dev.to/jeetvora331/server-state-vs-client-state-in-react-for-beginners-3pl6
• https://www.linkedin.com/pulse/understanding-server-state-vs-client-frontend-farimah-fattahi-fxdff
• https://www.reddit.com/r/reactjs/comments/tzbbdb/managing_server_and_client_state_in_fullstack/
• https://react-community-tools-practices-cheatsheet.netlify.app/state-management/overview/