Styles being rendered in duplicate

[ivoreis]

Hi,

Running the example, using a custom Document (with-styled-components) I noticed that the stylesheets are being added in duplicate to the page.

Apparently flushing the stylesheets like we're doing here avoids this issue but raises a total different one (FOUC).

Any idea why the stylesheets are being added more than once and any tip how to avoid this?

[nkzawa]

Basically, styled-components doesn't officially support SSR yet. I'm not sure if we can avoid this.

styled-components/styled-components#124

[bnjmnt4n]

Based on my experience, the stylesheets are added more than once only when on dev mode, when hot reloading is enabled. Apart from that, I haven't encountered this issue elsewhere, so this issue isn't that serious, although it can still cause problems.

[timneutkens]

@nkzawa I guess this is fixed by #668, might have to update the example.

[nkzawa]

@timneutkens it doesn't fix the issue since styles of styled-components are not rendered by next/head.

[timneutkens]

Styled-components has released a v2 branch under 2.0.0 which is currently in pre-release
try npm install styled-components@2.0.0-4

It has better server rendering support. @ivoreis could you try to implement it?