Generate Metadata Function Causes Page to Hang When Endpoint Call is Pending

[daniellalasa2]

Description

In our application, we use the generateMetadata function to load metadata tags from a service and images from a third-party service. Occasionally, if the generateMetadata function is pending due to an endpoint call or similar, it causes our entire page to hang until the timeout is reached.

According to this Next.js documentation,

Next.js will wait for data fetching inside generateMetadata to complete before streaming UI to the client. This guarantees the first part of a streamed response includes tags.

While this behavior is beneficial for ensuring the tags are included in the first part of the response, it also means that any delay in the endpoint call or other operations within generateMetadata results in the entire page hanging.

We are seeking a solution or workaround to stream the head tags similarly to other DOM elements in server components to prevent the entire page from hanging due to delays in generateMetadata.

---

Steps to Reproduce

Use the generateMetadata function to load tags and images from an endpoint call or similar service.
Have the endpoint call hang or experience a delay.
Observe that the entire page hangs until the timeout is reached (if it's defined!).

Expected Behavior

The SSR page should not hang. The head tags should be streamed in a manner similar to other DOM elements in server components.

---

Is there any way to stream the head tags similarly to other DOM elements in server components to avoid this issue?

Thank you for your assistance.

Additional Context
Next.js version: 14.1.1
Node.js version: 20.11.1
Operating System: Linux