NextJS中如何结合Suspense使用多个useSWR Hooks？

API 探路者

2026-7-4

问题解决：多SWR Suspense Hook引发的React Hook错误

错误原因分析

你遇到的两类错误本质是React Hook调用顺序不稳定导致的：

当多个开启suspense的useSWR同时触发时，SWR旧版本的内部Hook调用逻辑会打破React要求的「Hook调用顺序必须一致」规则
初始渲染时的Update hook called错误是Hook顺序紊乱引发的连锁问题，并非React本身的bug

修复方案

方案1：升级SWR到最新稳定版

这个问题在SWR早期版本（如v1.x部分版本）中存在，官方后续已修复多Suspense Hook的调用顺序问题。执行命令升级：

npm install swr@latest
# 或使用yarn
yarn add swr@latest

方案2：统一封装SWR Hook（增强代码可维护性）

如果升级后仍有问题，可将重复的useSWR调用封装为自定义Hook，确保每次调用的顺序完全一致：

// hooks/useSuspenseData.ts
import useSWR from 'swr';

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

export function useSuspenseData(url: string) {
  return useSWR(url, fetcher, { suspense: true });
}

在组件中调用封装后的Hook：

// Component.tsx
import { useSuspenseData } from '../hooks/useSuspenseData';

export default function ComponentExample() {
  const { data: data1 } = useSuspenseData('/api/data1');
  const { data: data2 } = useSuspenseData('/api/data2');
  const { data: data3 } = useSuspenseData('/api/data3');

  console.log(data1, data2, data3);
  return <div>数据已加载</div>;
}

方案3：确保组件处于Suspense边界内

NextJS中使用SWR的suspense模式时，必须将组件包裹在React的Suspense组件中，避免初始渲染异常：

// pages/index.tsx
import { Suspense } from 'react';
import ComponentExample from '../components/Component';

export default function Home() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <ComponentExample />
    </Suspense>
  );
}