{"action":"created","issue":{"url":"https://api.github.com/repos/zeit/next.js/issues/3796","repository_url":"https://api.github.com/repos/zeit/next.js","labels_url":"https://api.github.com/repos/zeit/next.js/issues/3796/labels{/name}","comments_url":"https://api.github.com/repos/zeit/next.js/issues/3796/comments","events_url":"https://api.github.com/repos/zeit/next.js/issues/3796/events","html_url":"https://github.com/zeit/next.js/issues/3796","id":296956671,"number":3796,"title":"Styled Components fail to SSR on first render","user":{"login":"stephencorwin","id":3931162,"avatar_url":"https://avatars2.githubusercontent.com/u/3931162?v=4","gravatar_id":"","url":"https://api.github.com/users/stephencorwin","html_url":"https://github.com/stephencorwin","followers_url":"https://api.github.com/users/stephencorwin/followers","following_url":"https://api.github.com/users/stephencorwin/following{/other_user}","gists_url":"https://api.github.com/users/stephencorwin/gists{/gist_id}","starred_url":"https://api.github.com/users/stephencorwin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stephencorwin/subscriptions","organizations_url":"https://api.github.com/users/stephencorwin/orgs","repos_url":"https://api.github.com/users/stephencorwin/repos","events_url":"https://api.github.com/users/stephencorwin/events{/privacy}","received_events_url":"https://api.github.com/users/stephencorwin/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-02-14T02:34:07Z","updated_at":"2018-03-16T12:38:21Z","closed_at":"2018-03-16T12:38:21Z","author_association":"NONE","body":"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.\r\n\r\n**Implementation based on:**\r\nhttps://github.com/zeit/next.js/tree/canary/examples/with-styled-components\r\n\r\n_Anyone have ideas?_ I'm stumped atm :(\r\nhttps://github.com/stephencorwin/nextjs-hello-world/tree/styled-components-ssr-error\r\n\r\n<!--\r\n    Thank you very much for contributing to Next.js by creating an issue! ❤️\r\n    To avoid duplicate issues we ask you to check off the following list\r\n-->\r\n\r\n<!-- Checked checkbox should look like this: [x] -->\r\n- [x] I have searched the [issues](https://github.com/zeit/next.js/issues) of this repository and believe that this is not a duplicate.\r\n\r\n## Expected Behavior\r\n<!--- If you're describing a bug, tell us what should happen -->\r\n<!--- If you're suggesting a change/improvement, tell us how it should work -->\r\nWhen I deploy the app, any SSR styles should be rendered the first refresh.\r\n\r\n## Current Behavior\r\n<!--- If describing a bug, tell us what happens instead of the expected behavior -->\r\n<!--- If suggesting a change/improvement, explain the difference from current behavior -->\r\nWhen 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.\r\n\r\n**First Render:**\r\n![render-error](https://user-images.githubusercontent.com/3931162/36180289-bc0e0e12-10ed-11e8-91be-9d0b7dfbc217.PNG)\r\n\r\n**Second Render:**\r\n![render-success](https://user-images.githubusercontent.com/3931162/36180308-d0ab5ad2-10ed-11e8-997a-a7b8f46c82af.PNG)\r\n\r\n## Steps to Reproduce (for bugs)\r\n<!--- Provide a link to a live example, or an unambiguous set of steps to -->\r\n<!--- reproduce this bug. Include code to reproduce, if relevant -->\r\n1. [![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/stephencorwin/nextjs-hello-world/tree/styled-components-ssr-error)\r\n2. Wait 2 mins for it to finish. Don't view the interstitial website with the progress status first.\r\n3. Go to the website generated by Now _-- fantastic feature btw!!!_\r\n4. My `<Header />`, `<Footer />`, and `globalStyles()` in the `_document.js` are not coming through.\r\n5. Refresh the page and you will notice the  styling has been fixed.\r\n\r\n## Context\r\n<!--- How has this issue affected you? What are you trying to accomplish? -->\r\n<!--- Providing context helps us come up with a solution that is most useful in the real world -->\r\nWhen I deploy the app, I should NOT have to visit the website once to ensure that the SSR styles are generated.\r\n\r\n## Your Environment\r\n<!--- Include as many relevant details about the environment you experienced the bug in -->\r\n| Tech    | Version |\r\n|---------|---------|\r\n|node|8.7.0|\r\n|next|4.2.3|\r\n|styled-components|3.1.6|\r\n|babel-plugin-styled-components|1.5.0|\r\n|OS|Windows 10|\r\n"},"comment":{"url":"https://api.github.com/repos/zeit/next.js/issues/comments/373700815","html_url":"https://github.com/zeit/next.js/issues/3796#issuecomment-373700815","issue_url":"https://api.github.com/repos/zeit/next.js/issues/3796","id":373700815,"user":{"login":"timneutkens","id":6324199,"avatar_url":"https://avatars2.githubusercontent.com/u/6324199?v=4","gravatar_id":"","url":"https://api.github.com/users/timneutkens","html_url":"https://github.com/timneutkens","followers_url":"https://api.github.com/users/timneutkens/followers","following_url":"https://api.github.com/users/timneutkens/following{/other_user}","gists_url":"https://api.github.com/users/timneutkens/gists{/gist_id}","starred_url":"https://api.github.com/users/timneutkens/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/timneutkens/subscriptions","organizations_url":"https://api.github.com/users/timneutkens/orgs","repos_url":"https://api.github.com/users/timneutkens/repos","events_url":"https://api.github.com/users/timneutkens/events{/privacy}","received_events_url":"https://api.github.com/users/timneutkens/received_events","type":"User","site_admin":false},"created_at":"2018-03-16T12:38:21Z","updated_at":"2018-03-16T12:38:21Z","author_association":"OWNER","body":"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."}}
{"actor":{"display_login":"timneutkens"}}