Using server data on the client with Suspense

[ldhwaddell]

I am struggling to find the best patterns for dealing with client components that require data fetched from the server.

Suppose I had a page with multiple components that require data. I want to use the features Next.js provides and fetch the data on the server with an async component. I could do something like the example below, however then the user must wait for all the data fetching to complete before they can be shown the page.

// Not Ideal
export default async function Home({ params }: PageProps) {
  const data = await getData(params.foo);
  const data0 = await getData0(params.bar);
  const data1 = await getData1(params.baz);

  return (
    <>
      {/* All charts are client components */}
      <ChartA data={data} />
      <ChartB data={data0} />
      <ChartC data={data1} />
    </>
  );
}

If I want to make this more user friendly and add Suspense then my understanding is that I would need to build something like:

export default async function DisplayChartA({ foo }: { foo: number }) {
  const data = await getData(foo);

  return <ChartA data={data} />;
}

and then use it like:

export default async function Home({ params }: PageProps) {
  const data0 = await getData0(params.bar);
  const data1 = await getData1(params.baz);

  return (
    <>
      {/* All charts are client components */}
      <Suspense fallback={<div> Loading...</div>}>
        <DisplayChartA foo={params.foo} />
      </Suspense>
      <ChartB data={data0} />
      <ChartC data={data1} />
    </>
  );
}

This however quickly gets messy and can double the amount of components I am required to create and maintain. I have tried creating something generic like:

type DataFetcher = (...args: any[]) => any;

interface ChartDisplayProps {
  dataFetcher: DataFetcher;
  chart: React.ReactElement;
}

export async function ChartDisplay({ dataFetcher, chart }: ChartDisplayProps) {
  const data = await dataFetcher();

  const ChartComponent = React.cloneElement(chart, { data });

  return <>{ChartComponent}</>;
}

export default async function Home({ params }: PageProps) {
  const data0 = await getData0(params.bar);
  const data1 = await getData1(params.baz);

  return (
    <>
      {/* All charts are client components */}
      <Suspense fallback={<div> Loading...</div>}>
        <ChartDisplay
          dataFetcher={() => getData(params.foo)}
          chart={<Chart />}
        />
      </Suspense>
      <ChartB data={data0} />
      <ChartC data={data1} />
    </>
  );
}

With this I find dealing with props can be difficult and it does not extend the best to different types of components.

Is there a more natural solution to passing this data around without having to wait for all queries in one spot?