Next.js客户端渲染用SWR+Suspense报错：SSR需提供回退数据

这个报错是因为SWR开启suspense: true时，即便项目采用纯客户端渲染，其内部校验逻辑仍会检查是否提供fallbackData——这是为兼容SSR场景设计的默认行为，可以通过以下两种方式解决：

方法一：给useSWR添加fallbackData配置 #

直接在SWR的配置项中指定fallbackData，可设为undefined或符合数据结构的初始值：

export const Foo = () => {
    const { data, error, isLoading } = useSWR(
        `/api/foo`,
        async (url: string) => await ApiClient.GET(url),
        { 
            suspense: true,
            fallbackData: undefined // 也可根据数据结构设初始值，比如{}、[]
        }
    )
    return <Bar data={data} />
}

方法二：明确标记组件为客户端组件 #

在Next.js中，给使用SWR Suspense的组件添加'use client'指令，确保组件完全在客户端运行，避免触发SSR相关校验：

'use client' // 组件顶部添加该指令

export const Foo = () => {
    const { data, error, isLoading } = useSWR(
        `/api/foo`,
        async (url: string) => await ApiClient.GET(url),
        { suspense: true }
    )
    return <Bar data={data} />
}

额外注意：若页面组件未添加'use client'，Next.js可能会默认进行静态分析，导致SWR触发SSR相关校验。确保所有涉及SWR Suspense的组件都标记为客户端组件。

内容的提问来源于stack exchange，提问作者Xero