現代前端開發中，數據抓取和管理是必不可少的一環。當應用變得更複雜，數據的管理變得越發關鍵，這不僅僅是關於如何發送 HTTP 請求，還包括如何處理數據緩存、狀態同步、重新抓取等操作。為此，開發者可以選擇不同的工具來有效處理數據抓取，這篇文章將介紹兩個流行的技術：SWR 和 RTK Query。

SWR：資料獲取的解決方案

SWR（Stale-While-Revalidate）是由 Vercel 開發的 React Hooks 資料抓取庫，旨在解決 React 應用中的數據獲取問題。SWR 基於 HTTP 的 "stale-while-revalidate" 策略，這種策略允許先使用過期數據來呈現界面，並在後台重新抓取最新的數據，當新數據獲取完成後，自動更新視圖。

SWR 的核心特點

1. 快取與重新抓取：SWR 支持快取（cache）機制，允許開發者在請求數據後進行快取，以提高效能。並且它會在數據變舊的時候自動重新抓取最新數據，而無需用戶手動刷新頁面。

2. 自動重試：如果抓取數據過程中發生錯誤，SWR 會自動重試，這對於提升用戶體驗非常有幫助，因為它能在後台自動進行數據請求修復。

3. 焦點重新抓取：當應用窗口或頁面重新獲取焦點時（例如用戶切換到另一個標籤頁再切回），SWR 會自動重新抓取最新的數據，確保用戶看到的是最新內容。

4. 間隔抓取：SWR 可以自動在指定的時間間隔內重新抓取數據，這在即時更新的應用場景中非常有用，例如聊天應用或儀表板類型的應用。

SWR 基本用法

使用 SWR 非常簡單，它內部依賴 React hooks，與 React 的數據流整合得非常好。以下是 SWR 的一個簡單範例：

import useSWR from 'swr';

// 定義 fetcher 函數，這是 SWR 用來抓取數據的函數
const fetcher = (url) => fetch(url).then((res) => res.json());

function App() {
  // 使用 SWR 抓取數據
  const { data, error } = useSWR('https://api.example.com/data', fetcher);

  if (error) return <div>加載失敗</div>;
  if (!data) return <div>加載中...</div>;

  return <div>數據：{data.message}</div>;
}

export default App;

在這個範例中，useSWR 會自動處理數據的抓取和快取，當數據變舊時會重新抓取最新數據，並更新畫面。

SWR 的適用場景

SWR 特別適合於對數據頻繁進行讀取的應用場景，如：

• 即時數據更新應用（例如即時新聞、儀表板）
• 資料展示型應用（如博客、文章列表）
• 需要自動重試和刷新數據的應用

RTK Query：Redux 狀態管理的資料抓取解決方案

RTK Query 是 Redux Toolkit 中的數據抓取解決方案。它專為整合 Redux 狀態管理而設計，能夠簡化與 API 交互的流程，並將數據抓取結果無縫集成到 Redux 狀態樹中。

RTK Query 的誕生源於需要解決 Redux 應用中繁瑣的資料抓取邏輯，它將 API 數據抓取和狀態管理整合在一起，使得開發者可以更輕鬆地處理資料的請求、快取、重試和狀態管理。

RTK Query 的核心特點

1. 與 Redux 無縫整合：RTK Query 是基於 Redux 的數據抓取解決方案，這意味著它可以將 API 數據請求和 Redux 狀態管理緊密結合，無需開發者手動處理狀態同步和 Redux actions。

2. 內建快取：RTK Query 自帶快取機制，能夠自動管理數據快取並在必要時進行重新抓取，這減少了重複請求，提升了效能。

3. 支持多種請求類型：RTK Query 支持 GET、POST、PUT、DELETE 等各種 HTTP 請求，並能處理異步數據流。

4. 自動數據重試：RTK Query 內建自動重試機制，當請求失敗時會自動重試，確保數據能夠被正確獲取。

5. 使用生成的 hooks：RTK Query 可以自動生成與 API 請求對應的 hooks，這樣開發者只需要關注 hooks 的使用，無需手動編寫大量 boilerplate 代碼。

RTK Query 基本用法

以下是一個使用 RTK Query 簡單實現的範例：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// 創建 API slice
const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }),
  endpoints: (builder) => ({
    getData: builder.query({
      query: () => '/data',
    }),
  }),
});

export const { useGetDataQuery } = api;

function App() {
  // 使用 RTK Query 生成的 hooks 來抓取數據
  const { data, error, isLoading } = useGetDataQuery();

  if (isLoading) return <div>加載中...</div>;
  if (error) return <div>加載失敗</div>;

  return <div>數據：{data.message}</div>;
}

export default App;

在這個範例中，我們使用 createApi 來定義一個 API，並透過自動生成的 useGetDataQuery hook 來獲取數據，數據請求結果會自動存儲在 Redux 的狀態樹中，並由 RTK Query 負責管理快取、重試和異步狀態。

RTK Query 的適用場景

RTK Query 非常適合 Redux 應用，尤其是在以下場景中表現出色：

• 需要與 Redux 無縫整合的應用
• 需要對數據進行複雜操作（例如增刪改查）
• 有多個 API 請求需要統一管理的應用

SWR 與 RTK Query 的比較

1. 與框架的整合

• SWR 更加專注於 React 應用，它完全基於 React Hooks，使用上簡單直觀。
• RTK Query 是基於 Redux 的，它更適合於 Redux 應用，能夠與 Redux 的其他功能（如中間件、DevTools）無縫結合。

2. 快取與資料同步

• SWR 的快取機制非常靈活，並且支援 "焦點重新抓取" 和 "間隔重新抓取" 等功能，適合即時性需求較高的應用。
• RTK Query 的快取機制更集中於整個應用的全局快取，對於需要長期持久化的資料更有效，並且能在 Redux 的狀態樹中統一管理。

3. 開發者體驗

• SWR 輕量化，配置少，非常適合小型或中型 React 應用。
• RTK Query 雖然初始設置稍微複雜一些，但在大型應用中，特別是需要處理複雜資料流時，能夠顯著減少 boilerplate 代碼，並提升維護性。

總結

SWR 和 RTK Query 都是非常強大的資料抓取工具，各有其獨特的優勢。SWR 更適合輕量級、即時性高的應用，而 RTK Query 則更適合與 Redux 集成的中大型應用。如果你的應用不依賴 Redux，那麼 SWR 會是更靈活的選擇；而如果應用已經使用了 Redux，RTK Query 無疑能幫助你更高效地管理 API 數據。