use-hydrate-example--server-side.tsx

import React, { ReactNode, use } from 'react';


interface Props {
  params: {
    id: string;
   },
  children: ReactNode;
}

export default async function MyServerSideComponent({
  params,
  children,
}: Props) {
  const data = use(listMyData({ id: params.id }))

  return (
    <div>
      <MyClientSideComponent existing={data} />
      { children }
    </div>
  );
}