useSWR()

特徴

• 自動でデータの再取得（再検証）
• キャッシュによる高速な初期表示
• フォーカス時や再接続時に再取得
• エラーハンドリングやローディングの状態も簡単に管理

使い方

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(res => res.json());

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);

  if (isLoading) return <div>読み込み中...</div>;
  if (error) return <div>エラーが発生しました</div>;

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