TanStack RouterのLoader機能

loader 機能とは

TanStack Router のloader機能は、ルートコンポーネントがレンダリングされる前にデータを事前に取得する仕組みです。API を叩いてデータ更新した後に、画面遷移してもすぐに変更が反映されていなかったりしますよね。それを防いでくれます。

loader 機能の設定方法

1. ルート定義に loader を追加

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/_layout/home/")({
  loader: async () => {
    try {
      const response = await getUsers().getUsersHome();
      return response.data;
    } catch (error) {
      console.error("ユーザーデータの取得に失敗しました:", error);
      return { groups: [] };
    }
  },
  component: RouteComponent,
});

2. コンポーネント内で loader のデータを使用

import { useLoaderData } from "@tanstack/react-router";

function RouteComponent() {
  // loaderの戻り値の型が自動的に推論される
  const userData = Route.useLoaderData();

  return (...);
}

3. キャッシュの無効化とデータの再取得

ユーザーがデータを更新した後、キャッシュされたデータを無効化して再取得したい場合は、router.invalidate()を使用します。

import { useRouter } from "@tanstack/react-router";

function ProfileForm() {
  const router = useRouter();

  const onSubmit = async (data: UserData) => {
    try {
      // APIを呼び出してデータを更新
      await putUsersProfileUserId(userId || "", {
        userName: data.userName,
        profileImage: formData.profileImage,
        profileColor: formData.profileColor,
      });

      // ルーターキャッシュを無効化して強制的に再ロードを行う
      router.invalidate();
      navigate({ to: "/home" });
    } catch (error) {
      ...
    }
  };
  ...
}

React Router も同様の機能を持っている

React Router も同じ loader 機能を提供しています：

const router = createBrowserRouter([
  {
    path: "/dashboard",
    element: <Dashboard />,
    loader: async () => {
      try {
        const response = await getUsers().getUsersHome();
        return response.data;
      } catch (error) {
        console.error("ユーザーデータの取得に失敗しました:", error);
        return { groups: [] };
      }
    },
  },
]);

function Dashboard() {
  const data = useLoaderData();
  // ...
}

SSR とのアプローチの違い

loader 機能（クライアントサイド）

• データ取得のタイミング: クライアントサイドで、ページコンポーネントがレンダリングされる前にデータを事前取得
• 実行環境: すべてブラウザ上で動作
• 特徴: SPA では通常、まず UI をレンダリングした後でデータ取得を開始するため、ローディング状態が発生する。loader はこれを最適化し、遷移の開始時点でデータ取得を始める

SSR（サーバーサイド）

• データ取得のタイミング: サーバー側でレンダリング前にデータを取得
• 実行環境: サーバーでデータ取得とレンダリングを行い、完成した HTML をクライアントに送信
• 特徴: ユーザーがページをリクエストした時点で、サーバーがデータ取得からレンダリングまで全て行い、データが埋め込まれた完成品をクライアントに送るため、別途プリロードは不要