Unexpected flash of unstyled content when using with next.js

Version

1.0.10

Reproduction

https://github.com/jimthedev/next-styled-components-fouc

Steps to reproduce

mkdir next-styled-components-fouc
cd next-styled-components-fouc
git init
npm init
npm install --save next styled-components
mkdir pages
touch pages/index.js
Copy the following to pages/index.js

import React from 'react'
import style from 'styled-components'
import css from 'next/css'

// Example of a component styled by styled-components
const StyledComponent = style.div`
  background-color: #000000;
  color: white;
`;

// Example from Next's home page
const glamorStyle = css({
  color: 'red',
  ':hover': {
    color: 'blue'
  },
  '@media (max-width: 500px)': {
    color: 'rebeccapurple'
  }
})

export default () => {
  return (
    <div>
      <div style={{color:'green'}}>I am being styled by React's built in styling</div>
      <StyledComponent>I am being styled by styled components</StyledComponent>
      <div className={glamorStyle}>I am being styled by next & glamor</div>
    </div>
  )
}

Add a script to the package.json like this:

{
  "scripts": {
    "dev": "next"
  }
}
and run:

npm run dev

Expected Behavior

I would expect the styled-components styles to be rendered in the same way (without FOUC) as the glamor and react built in styling.

Actual Behavior

There is a FOUC before the styled-components are applied. Specifically the component with the black background color takes longer to apply styles than the other components.

Tweet for reference: https://twitter.com/JimTheDev/status/792849817907007488 Corresponding next.js issue: https://github.com/zeit/next.js/issues/184

[geelen]

Ah ok you get the flash when loading from the client after rendering on the server. Yep, that sounds like something we haven’t considered yet. I’ll take a look.

[mxstbr]

We’re working on this @luisrudge, see #214 and #227. Soon!