If I have this page, how do I best deal with the await here?

Should I await id and fetchproduct in the page and send the resolved product or should I do like I do now? If I do that I can't use suspense this way right?

But if I do what I do now, should I still await the product in the generateMetadata since it needs to be resolved there? If so, how does the cache work, does it still cache the fetch?

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const data = await fetchProduct(id);
  return {
    title: data.title,
  };
}

//get the dynamic id from the page url and use that to fetch products
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  //since params is a promise we have to await it first
  const { id } = await params;
  //fetch product but don't wait for it here, waitin is in the Card instead
  const data = fetchProduct(id);
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductDetailsCard product={data} />
    </Suspense>
  );
}