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

Docs: React 18 + _document.getInitialProps double-render issue #36268

Closed
Andarist opened this issue Apr 19, 2022 · 3 comments · Fixed by #36352
Closed

Docs: React 18 + _document.getInitialProps double-render issue #36268

Andarist opened this issue Apr 19, 2022 · 3 comments · Fixed by #36352
Labels
Documentation Related to Next.js' official documentation.

Comments

@Andarist
Copy link
Contributor

Andarist commented Apr 19, 2022 •
edited

What is the improvement or update you wish to see?

Emotion maintainer here 👋

We got an issue report about a change in behavior with React 18 and Next.js here. I've managed to diagnose this a little bit and it seems that the issue is, at least partially, related to:

  1. hitting a React 18 code branch here that is supposed to render the shell early to the stream
  2. calling the provided _document.getInitialProps later on here

This creates a "double render" of sorts and the first render is not wrapped/enhanced with the Emotion's CacheProvider as that is used in the _document (here).

I've looked through the docs but I'm not sure how to reliably wrap the whole app with a component. Using _document.getInitialProps is recommended by the Material UI team to be compatible with SSG, see here

Is there any context that might help us understand?

No further context, everything was put in the main description of the issue.

Does the docs page already exist? Please link to it.

No response
@Andarist Andarist added the Documentation Related to Next.js' official documentation. label Apr 19, 2022
This was referenced Apr 19, 2022
Closed
Closed
@HaNdTriX
Copy link
Contributor

#36229

@shuding shuding mentioned this issue Apr 21, 2022
Merged
10 tasks
@kodiakhq kodiakhq bot closed this as completed in #36352 Apr 21, 2022
kodiakhq bot pushed a commit that referenced this issue Apr 21, 2022
@shuding
Ensure there is only 1 render pass in concurrent rendering with getIn…
be9491e 
…itialProps in `_document` (#36352)

This PR makes sure `renderPage` calls `renderShell` in concurrent features, and `renderToString` if not.

Closes #36268, #36229.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
@himadrinath
Copy link

looks like the problem arrived again in canary release.
can any one confirm that

@github-actions
Copy link
Contributor

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 Jun 11, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Documentation Related to Next.js' official documentation.
Projects
None yet
Milestone
No milestone
3 participants
@HaNdTriX @Andarist @himadrinath