Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When generateMetadata performs an asynchronous action, Suspense is not being rendered until generateMetadata finish #72935

Open
ebidrey opened this issue Nov 18, 2024 · 1 comment
Labels
bug Issue was opened via the bug report template. Metadata Related to Next.js' Metadata API. Performance Anything with regards to Next.js performance.

Comments

@ebidrey
Copy link

ebidrey commented Nov 18, 2024

Link to the code that reproduces this issue

https://github.com/ebidrey/suspense-generate-metadata

To Reproduce

To Reproduce

You can run this simple snippet

import { Suspense } from "react"

export async function generateMetadata() {
    const results = await fetch('https://postman-echo.com/delay/2');
    await results.json();
    return {
        title: 'Test',
        description: 'Test',
    }
}

async function PageContent() {
    const results = await fetch('https://postman-echo.com/delay/2');
    await results.json();
    return  <h1>Test</h1>
}

export default async function Page() {
    return (
        <Suspense fallback={<div>loading running 2 seconds later</div>} key={Math.random()}>
            <PageContent />
        </Suspense>
    )
}

It is also available in github repo

Current vs. Expected behavior

I expect suspense fallback to be activated immediately when the page request is made and then, the page and the metadata get streamed. Instead, page stucks for the amount of time the request to the api takes, showing nothing up to the request finished, degradating the user experience and not improving SEO in any way.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.10
  pnpm: N/A
Relevant Packages:
  next: 15.0.4-canary.14 // Latest available version is detected (15.0.4-canary.14).
  eslint-config-next: 15.0.4-canary.14
  react: 19.0.0-rc-380f5d67-20241113
  react-dom: 19.0.0-rc-380f5d67-20241113
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Metadata, Performance

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

Tested in latest canary and stable.

@ebidrey ebidrey added the bug Issue was opened via the bug report template. label Nov 18, 2024
@github-actions github-actions bot added Metadata Related to Next.js' Metadata API. Performance Anything with regards to Next.js performance. labels Nov 18, 2024
@markcarroll
Copy link

I've hit this same issue too. It has forced me to change all my page titles to generic static strings so that suspense fallback gets rendered.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Metadata Related to Next.js' Metadata API. Performance Anything with regards to Next.js performance.
Projects
None yet
Development

No branches or pull requests

2 participants