`HydrateFallback`

HydrateFallback 元件是一種告知 Remix 您不希望在 hydration 時執行 clientLoader 之前呈現路由元件的方式。當匯出時，Remix 將會在 SSR 期間呈現 fallback，而不是預設的路由元件，並且會在 clientLoader 完成後，在客戶端呈現您的路由元件。

最常見的用例是僅限於客戶端的路由（例如瀏覽器內的 canvas 遊戲）以及使用客戶端數據（例如已儲存的使用者偏好設定）來增強您的伺服器數據。

export async function clientLoader() {
  const data = await loadSavedGameOrPrepareNewGame();
  return data;
}
// Note clientLoader.hydrate is implied without a server loader

export function HydrateFallback() {
  return <p>Loading Game...</p>;
}

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

export async function loader() {
  const data = getServerData();
  return json(data);
}

export async function clientLoader({
  request,
  params,
  serverLoader,
}: ClientLoaderFunctionArgs) {
  const [serverData, preferences] = await Promise.all([
    serverLoader(),
    getUserPreferences(),
  ]);
  return {
    ...serverData,
    preferences,
  };
}
clientLoader.hydrate = true;

export function HydrateFallback() {
  return <p>Loading user preferences...</p>;
}

export default function Component() {
  const data = useLoaderData<typeof clientLoader>();
  if (data.preferences.display === "list") {
    return <ListView items={data.items} />;
  } else {
    return <GridView items={data.items} />;
  }
}

關於 HydrateFallback 的行為，有一些細微之處值得注意：

它僅在初始文件請求和 hydration 時相關，並且不會在任何後續的客戶端導航中呈現
它僅在您還在給定的路由上設定 clientLoader.hydrate=true 時相關
如果您有一個沒有伺服器 loader 的 clientLoader，它也會相關，因為這表示 clientLoader.hydrate=true，否則沒有任何 loader 數據可以從 useLoaderData 返回
- 即使您在這種情況下沒有指定 HydrateFallback，Remix 也將不會呈現您的路由元件，並且會向上冒泡到任何祖先 HydrateFallback 元件
- 這是為了確保 useLoaderData 保持「快樂路徑」
- 如果沒有伺服器 loader，useLoaderData 將在任何呈現的路由元件中返回 undefined
您無法在 HydrateFallback 中呈現 <Outlet/>，因為無法保證子路由能正確運作，因為如果它們在 hydration 時執行 clientLoader 函式，則其祖先 loader 數據可能尚未可用（例如 useRouteLoaderData() 或 useMatches() 的用例）

另請參閱

clientLoader