Best practice to kick off data request in RSC and using SWR on client

[yairhaimo]

I followed the Nextjs SPA guide which gives a pattern of using SWRConfig with a fallback in order to kick off the data fetching on the server and populating the SWR on the client thus shaving off a bit of time until the data is shown to the user and still enjoying client side caching.

That's fine if you have hardcoded keys (taken from the docs):

 <SWRConfig
      value={{
        fallback: {
          // We do NOT await getUser() here
          // Only components that read this data will suspend
          '/api/user': getUser(),
        },
      }}
    >
      {children}
    </SWRConfig>

If i have a dynamic route i cannot use this pattern and instead i pass a promise as a prop to a client component:

// RSC page
export default async function Page() {
  return <ClientComponent data={getDummyData('some dynamic key')} />;
}

// Client component
'use client';
export function DetailsClient(props: {data: Promise<string>}) {
  const { data } = useSWR(['/api/dummydata', 'some dynamic key'], { fallbackData: props.data });
  return <div>{data}</div>;
}

The problem is that i then need to create a route handler for /api/dummydata which will call getDummyData (like in the RSC).

import { getDummyData } from '@/dal/dummy/api';
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  const { id } = params;
  const data = await getDummyData(id);
  return NextResponse.json(data);
}

1. It's cumbersome
2. It's a different approach than in pages that are not dynamic (which use the fallback in the SWRConfig)

Am I missing anything? What is the best practice in such a case?

Thank you!