Cannot serialize using "unstable_serialize" in Server Components

[ariesclark]

Bug report

Description / Observed Behavior

import { unstable_serialize } from "swr/infinite" or "swr"; throws an error in SSR.
Which makes it difficult to fill the fallback cache to satisfy Error: Fallback data is required when using suspense in SSR.

You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

   ,-[/<...>/node_modules/.pnpm/[email protected][email protected]/node_modules/swr/infinite/dist/index.mjs:1:1]
 1 | import { useRef, useCallback } from 'react';
   :          ^^^^^^
 2 | import useSWR from 'swr';
 3 | import { withMiddleware, createCacheHelper, isUndefined, useIsomorphicLayoutEffect, serialize, UNDEFINED, isFunction } from 'swr/_internal';
 4 | import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
   `----

The error was caused by importing 'swr/infinite/dist/index.mjs' in './src/app/<...>/layout.tsx'.

A hacky solution is to use the result of the serialize function.

<SWRConfig
  value={{
    fallback: {
      [`$inf$@"conversations",0,`]: [conversations]
    }
  }}
>...</SWRConfig>

Expected Behavior

Should be able to serialize the key on the server.

Repro Steps / Code Example

Additional Context

SWR version: 2.1.5
Next.js version: 13.3.1

SWRConfig is a wrapper around the provider using "use client", as mentioned in my previous issue: #2464

[koba04]

closed via #2664

[huozhi]

Reopen as it's still having a bundling issue in beta version