Improved generateMetadata() for transferring data directly to templates without re-accessing the server

[Hiwo-1101000-1101001]

Goals

1. Allow data fetched in generateMetadata to be seamlessly passed to the template.
2. Increase efficiency by reducing redundant server calls.
3. Improve developer experience by consolidating data-fetching logic.

Non-Goals

1. Changing the existing behavior of how generateMetadata works for those who do not need this feature.
2. Introducing a completely new data-fetching mechanism besides the existing functions.

Background

Currently, in Next.js, generateMetadata allows for setting metadata dynamically, but if the same data also needs to be used in the template, developers have to perform the data fetching twice – once in generateMetadata and once in the component itself. This leads to redundant network requests and a less optimal performance. By enabling the ability to pass data fetched in generateMetadata directly to the rendering template, we can improve both performance and developer experience. Although developers can manually workaround this by creating custom middlewares or HOCs, these solutions aren't as clean or efficient.

As my Google searches show, I'm not the only one with this problem:

1. https://stackoverflow.com/questions/77842295/how-to-make-a-single-request-with-next-js-and-generate-metadata
2. https://www.reddit.com/r/nextjs/comments/171ng7a/generatemetadata_and_the_server_component_calling/

The only solution I have found is caching the request, but it seems to me that this is not the best solution to the problem

Proposal

The proposed feature will modify generateMetadata to allow returning a payload that can be directly passed to the rendering component, eliminating the need for redundant data fetching. This can be achieved by returning an additional key in the object that generateMetadata returns. For example:

export async function generateMetadata() {
  const data = await fetchDataFromServer();
  return {
    title: 'Page Title',
    description: 'Page Description',
    templateData: data // Pass this data to the template
  };
}

In the above example, template Data would be directly available in the rendering component. Implementation could involve extending the generateMetadata function to handle this additional key and appropriately manage its flow to the template.

Are you interested in contributing?:
Yes, I am interested in contributing to the implementation and can assist with both coding and documentation.