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）。

另请参阅

• 客户端数据指南
• HydrateFallback
• clientAction