「Next.jsでUX向上！SWRとプリロードでダッシュボードを高速表示する方法」

✅ 導入文（例）

ダッシュボードなどの表示速度が重要な画面では、ユーザーがアクセスした瞬間にデータがすでに用意されていることが理想です。この記事では、Next.js + SWRを使った**プリロード（事前データ取得）**のテクニックをご紹介します。

✅ コードサンプル付き解説

1. 通常のSWRによる取得

// useDashboardData.ts
import useSWR from "swr";

export const useDashboardData = (userId: string) =>
  useSWR(userId ? `/api/dashboard?userId=${userId}` : null, fetcher);

// DashboardPage.tsx
const Dashboard = () => {
  const { user } = useSession();
  const { data, isLoading } = useDashboardData(user?.id);

  if (isLoading) return <div>読み込み中...</div>;

  return <div>こんにちは、{data.name}さん！</div>;
};

2. プリロードの追加（例：Appのルートやログイン完了後）

// prefetchDashboardData.ts
import { mutate } from "swr";

export const prefetchDashboardData = async (userId: string) => {
  const res = await fetch(`/api/dashboard?userId=${userId}`);
  const data = await res.json();
  mutate(`/api/dashboard?userId=${userId}`, data, false); // ✅ キャッシュにセット
};

// useEffectなどでプリロード
useEffect(() => {
  if (user?.id) {
    prefetchDashboardData(user.id);
  }
}, [user]);

✅ 解説ポイント

• mutate を使って事前にキャッシュにデータを入れておく

• SWRが同じキーで useSWR を呼び出すと、即座にキャッシュされたデータを表示

• UX的には「ローディングなしで即表示される」体験になる

🔍 プリロード（preload）との違いと、今回 mutate を選んだ理由

SWRには preload というAPIも存在し、Reactの外側からでも事前にデータ取得を始めてキャッシュに格納することができます。これにより、ページ表示時のデータ取得を並列化し、ウォーターフォール問題を回避するのに役立ちます。

ただし、今回のように 「ユーザー情報が取得された後に、それに依存するデータを能動的にキャッシュにセットしたい」というケースでは、mutate の方が柔軟で適しています。

具体的には、

• mutate は 明示的なタイミング（ログイン完了後など）で実行できる

• サーバーサイドのレスポンスをそのまま キャッシュとして注入できる

• fallbackData を使うより、更新性・制御性が高い

といった利点があります。

✅ まとめ文

SWRとmutateを組み合わせることで、ユーザーがページにアクセスする前にデータを先回りして取得できます。プリロードは、体感速度を高め、直感的なアプリ体験を作るための重要なテクニックです。

今回は、ユーザー情報が取得された後に確実にデータをセットする必要があったため、mutateによるプリロード風の処理を採用しました。このように、状況に応じて preload と mutate を使い分けることが、SWRを最大限に活かすポイントです。