There are two examples in this repo:

Using SWRConfig to pass fallback data#

In app/page.tsx what we do is calling getData on the initial render, and passing the Promise value into SWRConfig's fallback, which will be used in the first render.

SWR knows to handle this promise by calling use internally, so you can show loading fallbacks by using <Suspense />.

Passing a promise into fallbackData#

in app/explicit/page.tsx

With RSC, a server component can pass Promise of a serialized value into a client component. That means we can also avoid the implicit routing with SWRConfig by passing the data as a promise into our client component:

function ServerComponent() {
  const dataPromise: Promise<Data> = getData();
  return <ClientComponent data={dataPromise} />
}

This way is using Suspense too under the covers, and therefore loading states can be used with <Suspense />