Error console issue: Fallback data is required when using Suspense in SSR

[zhiyanzhaijie]

Bug report

Description / Observed Behavior

When using swr suspense: true in use client; component wrapped in a suspense boundry. It always come out with that error console in server side, both in env of development and production.

I have try the followed ways to solve:

1. add swr config - fallbackdata.

error disappear. But my component ui went wrong - first-time UI rendered with fallbackdata, then suspense fallback, finally the seccess-data fallback or error-fallback

2. adjust component code with isMounted state checked(see the comments part in screenshot that pasted),

I don't know what actually it happens, but it seems the ssr logic don't go through my component anymore, so it works. The problem is my component code is more complex now and i doubt that it got a worse performance.

Repro Steps / Code Example

1. create a client-side comp with suspense: true swr using, wrapped in a react/Suspense
2. when the component mounted, the console error will show in node side.

Additional Context

versions:

swr: 2.3.3.
nextjs: 15.3.1

[marlonschlosshauer]

While not a fix, I noticed that this only happens when the fetch is active by default. Not sure how you set up your isMounted, however I had a select input that, if a value was selected, would show a component with an useSWR call inside.

Something like this:

export const Example = () => {
    const [selection, setSelection] = useState<string | null>("foo");

    return (
        <>
            <Select value={selection} options={options} onValueChange={setSelection} />
            {selection && (
                <Suspense>
                    <Check value={selection} />
                </Suspense>
            )}
        </>
    );
};

Where Check calls useSWR to fetch an API depending on value. This caused issues, as by default a selection was made, causing the <Check/> to be rendered, thus executing the useSWR. Next.js tried to SSR this (because of the default value) and it explodes. I think L721 in use-swr.ts is the reason (as its both suspense enabled & on the server). You can side-step this by using a dynamic import with SSR false, but that felt overkill.

I decided to keep the state null and use derived state (with a default value) for my input:

export const Example = () => {
    const [selection, setSelection] = useState<string | null>(null);
    const currentSelection = selection ?? "foo";

    return (
        <>
            <Select value={currentSelection} options={options} onValueChange={setSelection} />
            {selection && (
                <Suspense>
                    <Check value={selection} />
                </Suspense>
            )}
        </>
    );
};