`clientLoader`

除了您的 loader 之外（或取代它），您可以定義一個 clientLoader 函式，該函式將在用戶端執行。

每個路由都可以定義一個 clientLoader 函式，在渲染時為路由提供資料

export const clientLoader = async ({
  request,
  params,
  serverLoader,
}: ClientLoaderFunctionArgs) => {
  // call the server loader
  const serverData = await serverLoader();
  // And/or fetch data on the client
  const data = getDataFromClient();
  // Return the data to expose through useLoaderData()
  return data;
};

此函式只會在用戶端執行，並且可以用在幾個方面

取代完整用戶端路由的伺服器 loader
透過在發生變異時使快取失效，與 clientLoader 快取一起使用
- 維護用戶端快取以跳過對伺服器的呼叫
- 繞過 Remix BFF 跳轉，並直接從用戶端點擊您的 API
進一步擴充從伺服器載入的資料
- 例如，從 localStorage 載入使用者特定的偏好設定
為了方便從 React Router 遷移

水合行為

預設情況下，在初始 SSR 文件請求時，當您的 Remix 應用程式水合時，clientLoader 不會為路由執行。這主要用於 (且較簡單的) 使用案例，其中 clientLoader 不會更改伺服器 loader 資料的形狀，而只是對後續用戶端導覽的優化 (從快取讀取或直接點擊 API)。

export async function loader() {
  // During SSR, we talk to the DB directly
  const data = getServerDataFromDb();
  return json(data);
}

export async function clientLoader() {
  // During client-side navigations, we hit our exposed API endpoints directly
  const data = await fetchDataFromApi();
  return data;
}

export default function Component() {
  const data = useLoaderData<typeof loader>();
  return <>...</>;
}

`clientLoader.hydrate`

如果您需要在初始文件請求期間，在水合過程中執行 clientLoader，您可以透過設定 clientLoader.hydrate=true 來選擇加入。這會告訴 Remix 需要在水合時執行 clientLoader。如果沒有 HydrateFallback，您的路由元件將使用伺服器 loader 資料進行 SSR - 然後 clientLoader 將執行，並且回傳的資料將在水合的路由元件中就地更新。

如果路由匯出 clientLoader 且未匯出伺服器 loader，則 clientLoader.hydrate 會自動被視為 true，因為沒有伺服器資料可與之進行 SSR。因此，我們始終需要在水合時執行 clientLoader，然後才能渲染路由元件。

HydrateFallback

如果您需要避免在 SSR 期間渲染預設路由元件，因為您有必須來自 clientLoader 的資料，您可以從您的路由匯出 HydrateFallback 元件，該元件將在 SSR 期間渲染，並且只有在 clientLoader 在水合時執行後，您的路由器元件才會被渲染。

參數

`params`

此函式接收與 loader 相同的 params 參數。

`request`

此函式接收與 loader 相同的 request 參數。

`serverLoader`

serverLoader 是一個非同步函式，用於從此路由的伺服器 loader 取得資料。在用戶端導覽時，這將對 Remix 伺服器 loader 進行 fetch 呼叫。如果您選擇在水合時執行 clientLoader，則此函式將傳回已在伺服器上載入的資料 (透過 Promise.resolve)。

另請參閱