Next.js: Flash of unstyled content / SSR styles not flushed to head in [email protected]

Created on 25 Sep 2018 · 4Comments · Source: vercel/next.js

Bug report

Describe the bug

Styles aren't flushed to the head anymore in [email protected] (they're nowhere to be found in the source served by the server), resulting in server-side source first rendered without styles, and then a client-side re-render showing those styles again.

next@6.* works great, and so does [email protected]
[email protected], and the latest canary ([email protected]) do not

To Reproduce

I was able to reproduce this with a typical next app using styled jsx, and (if that's meaningful in the current situation), the following HOC:

See code

const asPage = (WrappedComponent, pageTitle) => (
  class extends React.Component {
    static async getInitialProps(context) { /* ... */ }

    render() {
      return (
        <div>
          <Head>
            <title>{pageTitle && `${pageTitle} – `}Unspent</title>
            {/* various meta and link tags */}
            <link rel="stylesheet" type="text/css" href="/static/icons/iconfont.css" />
          </Head>

          <SessionContext.Provider value={this.props.session}>
            <WrappedComponent {...this.props} />
          </SessionContext.Provider>

          <style jsx>{`:global(body) { /* some global styles */ }`}</style>
        </div>
      );
    }
  }
);

Expected behavior

Style tags to be flushed in the head on server-side render.

Source

pioul

Most helpful comment

@pioul Would you be able to extrapolate the process to avoid this "bug"? I'm having this same behavior but having a hard time understanding what is happening that is causing it and what exactly I need to do. I just started trying to use the