Suspense or other loading indicator for generateMetadata
Unanswered
Odorous house ant posted this in #help-forum
Odorous house antOP
Hi Guys! I'm working on a project that uses an API that is quite slow, sometimes a request takes ~2-3s. I can't do anything about the API so I would like to be sure, that users will get some visual indication that something is loading under the hood when navigating my site. What is more, the project will have around ~1M pages (let's call them product pages) and it is very highly possible that one product will be opened only by one person, only once. That's why I don't want to depend on cache.
I realised that when going to (clicking on a link) a page that is using generateMetadata there is no indication that something is loading untill the fetch request from inside the generateMetadata finishes. So for a user, that clicks on a Link to a page, nothing happens for 2-3 seconds. The browser is not showing that anything is loading and react's suspense is not triggered.
I've created a minimal reproduction of this issue here:
https://codesandbox.io/p/github/wiwo-dev/generatemetadata-loading-issue/main
And here is the repo for this: https://github.com/wiwo-dev/generatemetadata-loading-issue
I realised that when going to (clicking on a link) a page that is using generateMetadata there is no indication that something is loading untill the fetch request from inside the generateMetadata finishes. So for a user, that clicks on a Link to a page, nothing happens for 2-3 seconds. The browser is not showing that anything is loading and react's suspense is not triggered.
I've created a minimal reproduction of this issue here:
https://codesandbox.io/p/github/wiwo-dev/generatemetadata-loading-issue/main
And here is the repo for this: https://github.com/wiwo-dev/generatemetadata-loading-issue
1 Reply
Odorous house antOP
To Reproduce
1. Run the application using : yarn run dev.
2. Navigate to the root path (/). Here, you'll find two lists of "users" retrieved from jsonplaceholder. The list at the top has the problem as it uses generateMetadata. The one at the bottom doesn't use generateMetadata.
3. The top list contains links to /user/[userId], and these links have a generateMetadata function that fetches data. Upon clicking these links, for the initial 3 seconds, there is no visible loading indication, making users believe that something might be wrong with the link.
4. In contrast, if you click on any of the links in the bottom list, which leads to /user-no-metadata/[userId] that does NOT use generateMetadata, you'll notice that a Loading state is triggered by Suspense, providing a clear loading indication.
(To simulate a slow API response, a setTimeout is intentionally used within the getUsers function.)
Is there a way to overcome this problem? Ideally to trigger Suspense from generateMetadata? Or maybe any other thoughts to keep the metadata being generated dynamically from the API but show some indication that user must wait for the page to load.
I also submitted it as a bug on Next's github: https://github.com/vercel/next.js/issues/55524
Thank you in advance for any help and hints!
1. Run the application using : yarn run dev.
2. Navigate to the root path (/). Here, you'll find two lists of "users" retrieved from jsonplaceholder. The list at the top has the problem as it uses generateMetadata. The one at the bottom doesn't use generateMetadata.
3. The top list contains links to /user/[userId], and these links have a generateMetadata function that fetches data. Upon clicking these links, for the initial 3 seconds, there is no visible loading indication, making users believe that something might be wrong with the link.
4. In contrast, if you click on any of the links in the bottom list, which leads to /user-no-metadata/[userId] that does NOT use generateMetadata, you'll notice that a Loading state is triggered by Suspense, providing a clear loading indication.
(To simulate a slow API response, a setTimeout is intentionally used within the getUsers function.)
Is there a way to overcome this problem? Ideally to trigger Suspense from generateMetadata? Or maybe any other thoughts to keep the metadata being generated dynamically from the API but show some indication that user must wait for the page to load.
I also submitted it as a bug on Next's github: https://github.com/vercel/next.js/issues/55524
Thank you in advance for any help and hints!