`clientLoader`

loaderに加えて（または代わりに）、クライアントで実行されるclientLoader関数を定義できます。

各ルートは、レンダリング時にルートにデータを提供するclientLoader関数を定義できます。

export const clientLoader = async ({
  request,
  params,
  serverLoader,
}: ClientLoaderFunctionArgs) => {
  // サーバーローダーを呼び出します
  const serverData = await serverLoader();
  // クライアントでデータをフェッチします
  const data = getDataFromClient();
  // useLoaderData() を介して公開するデータを返します
  return data;
};

この関数はクライアントでのみ実行され、次のような方法で使用できます。

フルクライアントルートのサーバーloaderの代わりに
ミューテーションでキャッシュを無効化することにより、clientLoaderキャッシュと一緒に使用する場合
- サーバーへの呼び出しをスキップするためのクライアント側のキャッシュを維持
- Remix BFF ホップをバイパスして、クライアントから直接APIにアクセス
サーバーからロードされたデータをさらに拡張する場合
- 例：localStorageからユーザー固有の設定を読み込む
React Routerからの移行を容易にする

水和の動作

デフォルトでは、clientLoaderは、初期SSRドキュメントリクエストでのRemixアプリの水和中に、ルートに対して実行されません。これは、clientLoaderがサーバーloaderデータの形状を変更せず、後続のクライアント側ナビゲーションの最適化（キャッシュから読み取る、または直接APIにアクセス）であるという主要な（そしてより単純な）ユースケースのためです。

export async function loader() {
  // SSR中は、直接DBとやり取りします
  const data = getServerDataFromDb();
  return json(data);
}
 
export async function clientLoader() {
  // クライアント側ナビゲーション中は、公開されたAPIエンドポイントに直接アクセスします
  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

clientLoaderから取得する必要があるデータがあるため、SSR中にデフォルトのルートコンポーネントのレンダリングを回避する必要がある場合は、SSR中にレンダリングされるHydrateFallbackコンポーネントをルートからエクスポートできます。clientLoaderが水和で実行されると、ルーターコンポーネントがレンダリングされます。

引数

`params`

この関数は、loaderと同じparams引数を受け取ります。

`request`

この関数は、loaderと同じrequest引数を受け取ります。

`serverLoader`

serverLoaderは、このルートのサーバーloaderからデータを取得するための非同期関数です。クライアント側ナビゲーションでは、これはRemixサーバーloaderへのfetch呼び出しを行います。clientLoaderを水和中に実行するようにオプトインした場合、この関数はサーバーですでにロードされたデータ（Promise.resolve経由）を返します。