Link to the code that reproduces this issue or a replay of the bug
https://github.com/wiwo-dev/generatemetadata-loading-issue
https://codesandbox.io/p/github/wiwo-dev/generatemetadata-loading-issue/main
To Reproduce
-
Run the application using the command: yarn run dev.
-
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.
-
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.
-
In contrast, if you click on any of the links in the bottom list, which leads to /user-no-metadata/[userId] that doesn't use generateMetadata, you'll notice that a Loading state is triggered by Suspense, providing a clear loading indication.
Current vs. Expected behavior
Current behaviour
When a user navigates to a page containing a generateMetadata function that fetches data from a slowly working API, there's a problem. The application appears to hang, providing no indication that it's actively loading. Notably, the fetch operation within generateMetadata doesn't trigger React's Suspense, and the browser also fails to display any loading indicators.
To simulate a slow API response, a setTimeout is intentionally used within the getUsers function.
I encountered this issue while working on a project with a tens of thousands number of subpages, and it's highly likely that a given subpage will be opened for the first time and only once, with new entries continually being added.
Expected behaviour
It should trigger the Suspense or show any kind of loading indicator in the browser so the user knows that something is happening under the hood and wait for the page to be displayed.
Verify canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.4.0: Mon Mar 6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103
Binaries:
Node: 18.7.0
npm: 8.15.0
Yarn: 1.22.15
pnpm: 6.11.0
Relevant Packages:
next: 13.4.20-canary.36
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
typescript: 5.1.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Metadata (metadata, generateMetadata, next/head)
Additional context
Is there a way to display a loading state or any form of indication that something is loading while still utilising the generateMetadata function to fetch metadata information from a slow API?
Link to the code that reproduces this issue or a replay of the bug
https://github.com/wiwo-dev/generatemetadata-loading-issue
https://codesandbox.io/p/github/wiwo-dev/generatemetadata-loading-issue/main
To Reproduce
Run the application using the command:
yarn run dev.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.The top list contains links to
/user/[userId], and these links have agenerateMetadatafunction 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.In contrast, if you click on any of the links in the bottom list, which leads to
/user-no-metadata/[userId]that doesn't usegenerateMetadata, you'll notice that a Loading state is triggered by Suspense, providing a clear loading indication.Current vs. Expected behavior
Current behaviour
When a user navigates to a page containing a
generateMetadatafunction that fetches data from a slowly working API, there's a problem. The application appears to hang, providing no indication that it's actively loading. Notably, thefetchoperation withingenerateMetadatadoesn't trigger React's Suspense, and the browser also fails to display any loading indicators.To simulate a slow API response, a
setTimeoutis intentionally used within thegetUsersfunction.I encountered this issue while working on a project with a tens of thousands number of subpages, and it's highly likely that a given subpage will be opened for the first time and only once, with new entries continually being added.
Expected behaviour
It should trigger the Suspense or show any kind of loading indicator in the browser so the user knows that something is happening under the hood and wait for the page to be displayed.
Verify canary release
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 22.4.0: Mon Mar 6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103 Binaries: Node: 18.7.0 npm: 8.15.0 Yarn: 1.22.15 pnpm: 6.11.0 Relevant Packages: next: 13.4.20-canary.36 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0 typescript: 5.1.3 Next.js Config: output: N/AWhich area(s) are affected? (Select all that apply)
Metadata (metadata, generateMetadata, next/head)
Additional context
Is there a way to display a loading state or any form of indication that something is loading while still utilising the
generateMetadatafunction to fetch metadata information from a slow API?