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

Global styles not being rendered server side and only occuring client side with flicker #5629

Closed
clayhan opened this issue Nov 8, 2018 · 6 comments · Fixed by #5631
Closed

Global styles not being rendered server side and only occuring client side with flicker #5629

clayhan opened this issue Nov 8, 2018 · 6 comments · Fixed by #5631

Comments

@clayhan
Copy link

clayhan commented Nov 8, 2018 •
edited
Loading

Bug report

On Next 7.0.2, using the Global styles and layouts approach to get CSS onto the page (https://github.com/zeit/next.js/wiki/Global-styles-and-layouts), my CSS is not being added to my app on server render but occurs on the client side. I will then see a "flicker/flash" where my styles come in after the fact. I have tried uninstalling/reinstalling Next to no avail.

Below is an example of my code

import Head from 'next/head';

const testing = () => (
  <div>
    <Head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charSet="utf-8" />
    </Head>
    <style jsx global>
      {`
        div {
          color: blue;
          font-size: 50px;
        }
      `}
    </style>
    testing
  </div>
);

export default testing;

Screenshots

testing

Thanks a ton for any help.
@timneutkens
Copy link
Member

Just tried locally and it's working perfectly fine, as you can see below font-size: 50px; is in the initial response

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1" class="jsx-462381706 next-head"/><meta charSet="utf-8" class="jsx-462381706 next-head"/><link rel="preload" href="/_next/static/development/pages/index.js" as="script"/><link rel="preload" href="/_next/static/development/pages/_app.js" as="script"/><link rel="preload" href="/_next/static/development/pages/_error.js" as="script"/><link rel="preload" href="/_next/static/runtime/webpack.js" as="script"/><link rel="preload" href="/_next/static/runtime/main.js" as="script"/><style id="__jsx-462381706">div{color:blue;font-size:50px;}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy90aW1uZXV0a2Vucy9wcm9qZWN0cy9zYW5kYm94L25leHQ3LTAtMi9wYWdlcy9pbmRleC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTTyxBQUdzQixXQUNJLGVBQ2pCIiwiZmlsZSI6Ii9Vc2Vycy90aW1uZXV0a2Vucy9wcm9qZWN0cy9zYW5kYm94L25leHQ3LTAtMi9wYWdlcy9pbmRleC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBIZWFkIGZyb20gJ25leHQvaGVhZCc7XG5cbmNvbnN0IHRlc3RpbmcgPSAoKSA9PiAoXG4gIDxkaXY+XG4gICAgPEhlYWQ+XG4gICAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTFcIiAvPlxuICAgICAgPG1ldGEgY2hhclNldD1cInV0Zi04XCIgLz5cbiAgICA8L0hlYWQ+XG4gICAgPHN0eWxlIGpzeCBnbG9iYWw+XG4gICAgICB7YFxuICAgICAgICBkaXYge1xuICAgICAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgICAgIGZvbnQtc2l6ZTogNTBweDtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICA8L3N0eWxlPlxuICAgIHRlc3RpbmdcbiAgPC9kaXY+XG4pO1xuXG5leHBvcnQgZGVmYXVsdCB0ZXN0aW5nO1xuIl19 */
/*@ sourceURL=/Users/timneutkens/projects/sandbox/next7-0-2/pages/index.js */</style></head><body><div id="__next"><div class="jsx-462381706" data-reactroot="">testing</div></div><script src="/_next/static/development/dll/dll_4a2ab6ce0cb456fbfead.js"></script><script>__NEXT_DATA__ = {"props":{"pageProps":{}},"page":"/","query":{},"buildId":"development"};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/development/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/development/pages/_error.js"></script><script src="/_next/static/runtime/webpack.js" async=""></script><script src="/_next/static/runtime/main.js" async=""></script></body></html>

@timneutkens
Copy link
Member

Are you by any chance adding a custom _document.js?

@clayhan
Copy link
Author

clayhan commented Nov 8, 2018

@timneutkens I am in fact using a custom _document.js as I'm using the styled-components template. Apologies, does this directly impact the usage of global styles? I would imagine now that this implies all of the global style code should go inside of _document.js?

@timneutkens
Copy link
Member

Basically yes, because that example uses renderPage() directly instead of calling the parent getInitialProps, meaning this is not called:

https://github.com/zeit/next.js/blob/canary/packages/next/pages/_document.js#L18

timneutkens added a commit to timneutkens/next.js that referenced this issue Nov 8, 2018
@timneutkens
Simplify styled-components example
bfab227 
- use `enhanceApp` so that styled-components used in _app.js are server rendered
- call parent getInitialProps, fixes vercel#5629
- return `styles`, making the render() method obsolete.
@timneutkens timneutkens mentioned this issue Nov 8, 2018
Merged
@timneutkens
Copy link
Member

@clayhan check this PR: #5631

timneutkens added a commit that referenced this issue Nov 8, 2018
@timneutkens
Simplify styled-components example (#5631)
ed2c379 
- use `enhanceApp` so that styled-components used in _app.js are server rendered
- call parent getInitialProps, fixes #5629
- return `styles`, making the render() method obsolete.

cc @mxstbr @probablyup
@clayhan
Copy link
Author

clayhan commented Nov 8, 2018

@timneutkens Thanks for your time as always, Tim!

@kyle-mccarthy kyle-mccarthy mentioned this issue Mar 26, 2019
Closed
@lock lock bot locked as resolved and limited conversation to collaborators Nov 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Simplify styled-components example timneutkens/next.js
2 participants
@timneutkens @clayhan