generateMetadata should not block a route with Suspense

[michaelschufi]

Adding a generateMetadata to an intercepting route, completely blocks the whole rendering of the route.

This means that we cannot show, e.g. a modal, with a skeleton while loading the content inside a Suspense boundary. Which makes for a worse user experience, since the title of the browser tab changing is secondary compared to showing immediate feedback after a click.

I suggest making an exception to the generateMetadata's blocking behaviour for intercepting routes, or making it configurable.

Edit: Actually, it shouldn't block in pages that load the content in a suspense as well. Because it kind of defeats the purpose of fetching the content while e.g. the layout is rendering already.

[peleteiro]

@michaelschufi have you any sugestion on How to avoid It? Im thinking on using react-helmet.

[michaelschufi]

No, I currently don't. I haven't had much time to look for a client side solution. But I can see this package working in a Suspense boundary. 👍

[peleteiro]

It does not work. :(

[chris-at-lemon]

I came here looking for a solution to the exact same problem: if I use "generateMetadata" it simply blocks rendering until the entire page has loaded and then renders the page - no suspense, or loading component displays despite them being in the path. Meaning that on a slow query my users stare at a frozen screen wondering if anything is happening.

I understand why it happens, the dynamic metadata needs to get populated before anything is sent to the browser. Would be nice if there was some workaround anyone could think of.

[klovistore2]

I use suspens, around a sub component and it works. Not the whole page

[ch-dg]

So are you saying that you wrap the return object of the default export, the "page", in a subcomponent and then wrap a suspense around that subcomponent?

Thanks for that tip, I will try this and if it works post an example here.

[klovistore2]

    <Suspense fallback={<LoadingSkeleton />}>
    <div>
             .... Skeleton expected
    </div>
    </Suspense>, not the whole page, just what takes time to load