-
Notifications
You must be signed in to change notification settings - Fork 26.2k
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
Styled Components fail to SSR on first render #3796
Comments
this is just a guess based on how the example (and my own project) is configured, but have you tried moving the global style injections out of I inject all of my global styles in a template component that i import into each page, and my It's also worth noting that I always call So, in your case, try editing your
I use this pattern a lot in my |
@brandonmp putting However, I am still having the same behavior for the |
I don't think components in
|
@brandonmp I was able to get it working by moving all of the components within It feels a little awkward though because in order to achieve my result of the StickyVerticalLayout (with scrolling Main), I now have to reference the
Screenshots |
I would love to see this limitation of the custom document lifted in the future. |
PR it! i've submitted a few PRs for nextjs docs before--it only takes a minute to do thru the github interface. |
The hydration from styled-components is only done on the App component inside _document. That's the reason adding styled-components inside _document doesn't work normally. |
@timneutkens I wound up here tonight with the same issues. With PR #4129 close to completion, does this mean we can / should do styled-components |
This is quite an old issue now but I had the same problem. FYI this option removes the need to add {this.props.styleTags} |
I just came here with the same problem. I copied the styled components example from the examples folder. |
+1. have the same problem at v8.0.1 |
"I have the same problem" on a closed issue while not providing a reproduction is not really helpful. Can you open a new issue with a clear and concise reproduction following the issue template. Thanks 🙏 |
same problem |
Read:
And this whole thread: https://twitter.com/timneutkens/status/1154351052973625346 |
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
I'm am using
styled-components
in Next.js. When I deploy the app, the first time the UI is rendered, it is unstyled. Only after a refresh does the SSR styles come through and persist.Implementation based on:
https://github.com/zeit/next.js/tree/canary/examples/with-styled-components
Anyone have ideas? I'm stumped atm :(
https://github.com/stephencorwin/nextjs-hello-world/tree/styled-components-ssr-error
Expected Behavior
When I deploy the app, any SSR styles should be rendered the first refresh.
Current Behavior
When I deploy the app, the first time the UI is rendered, it is unstyled. Only after a refresh does the SSR styles come through and persist.
First Render:
![render-error](https://user-images.githubusercontent.com/3931162/36180289-bc0e0e12-10ed-11e8-91be-9d0b7dfbc217.PNG)
Second Render:
![render-success](https://user-images.githubusercontent.com/3931162/36180308-d0ab5ad2-10ed-11e8-997a-a7b8f46c82af.PNG)
Steps to Reproduce (for bugs)
<Header />
,<Footer />
, andglobalStyles()
in the_document.js
are not coming through.Context
When I deploy the app, I should NOT have to visit the website once to ensure that the SSR styles are generated.
Your Environment
The text was updated successfully, but these errors were encountered: