编辑“︁Next.js客户端数据获取”︁（章节）

=== 2. SWR（Stale-While-Revalidate） ===

Next.js推荐的数据获取库，提供缓存、重试等高级功能：

<syntaxhighlight lang="javascript">
import useSWR from 'swr';

const fetcher = (...args) => fetch(...args).then(res => res.json());

function Profile() {
  const { data, error, isLoading } = useSWR(
    '/api/user', 
    fetcher,
    {
      revalidateOnFocus: false, // 禁用窗口聚焦时重新验证
    }
  );

  if (error) return <div>Failed to load</div>;
  if (isLoading) return <div>Loading...</div>;
  
  return <div>Hello {data.name}!</div>;
}
</syntaxhighlight>

'''特性对比'''：
{| class="wikitable"
|-
! 功能 !! useEffect+fetch !! SWR
|-
| 缓存 | ❌ 无 | ✅ 自动
|-
| 错误重试 | 手动实现 | ✅ 自动
|-
| 聚焦重新验证 | 手动实现 | ✅ 可配置
|}