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.

Sign up for GitHub

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

Jump to bottom

Application should render before Document when streaming is turned on #33922

Closed
kara opened this issue Feb 2, 2022 · 2 comments
Closed

Application should render before Document when streaming is turned on #33922

kara opened this issue Feb 2, 2022 · 2 comments
Labels
Metadata Related to Next.js' Metadata API.

Comments

@kara
Copy link
Collaborator

kara commented Feb 2, 2022 •
edited

Run next info (available from version 12.0.8 and up)

Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 21.3.0: Wed Jan 5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_X86_64
Binaries:
Node: 16.0.0
npm: 7.10.0
Yarn: 1.22.11
pnpm: N/A
Relevant packages:
next: 12.0.8
react: 18.0.0-rc.0
react-dom: 18.0.0-rc.0

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

16.0.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Document renders before application renders when streaming is turned on (i.e. concurrentFeatures flag is set to true), so it builds the <head> tag before next/head instances are discovered in the component tree. As a result, next/head tags are not in the <head> of the initial SSR response and only are added to <head> once the component tree renders on the client side. This is an invisible performance regression if there are resource tags in next/head, since it appears to work but the tags load much later in the process.

cc @shuding @huozhi @devknoll

Expected Behavior

Application should render before the Document so next/head instances are discovered before the <head> tag is built. This would prevent the performance regression.

To Reproduce

  1. Have a component that uses next/head (no Suspense boundaries):
function Profile(props) {
   return (
       <Head> 
          <link rel="stylesheet" ... />
        </Head>
   );
}
  1. Turn on concurrentFeatures flag
  2. Look at network response for the document and see that stylesheet isn't in the <head> tag
@kara kara added the bug Issue was opened via the bug report template. label Feb 2, 2022
@balazsorban44 balazsorban44 added Metadata Related to Next.js' Metadata API. area: Concurrent Features and removed bug Issue was opened via the bug report template. labels Feb 3, 2022
@shuding
Copy link
Member

shuding commented Apr 8, 2022

Fixed in #35732.

@shuding shuding closed this as completed Apr 8, 2022
@github-actions
Copy link
Contributor

github-actions bot commented May 9, 2022

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 9, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Metadata Related to Next.js' Metadata API.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@shuding @kara @balazsorban44