Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

styled-jsx does not render server side with custom _document.js

See original GitHub issue

I am using styled-jsx throughout my app and I am getting a flicker when the server loads the initial page. This only happens when I use a custom _document.js, so it must be something with that page.

This is the code:

import Document, { Head, Main, NextScript } from 'next/document'
import GoogleTagManager from '../utils/GTM'
import flush from 'styled-jsx/server'

export default class MyDocument extends Document {
    static async getInitialProps ({ renderPage }) {
        const { html, head } = renderPage()
        const styles = flush()
        return { html, head, styles }
    }
    render () {
        console.log('styles: ', this.props.styles)
        return (
            <html>
                <head>
                    <script src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_KEY}`} />
                    <meta charSet="utf-8" />
                    {this.props.styles}
                </head>
                <body className="body">
                    <GoogleTagManager gtmId='GTM-xxx' />
                    <div id="fb-root" />
                    <Main />
                    <NextScript />
                </body>
            </html>
        )
    }
}

Output:

styles: []
styles: []

The console output for props.style is always empty arrays. Should this be done in a different way? I’m unsure what to do as the docs seem to say this is all that is needed.

Your Environment

Tech	Version
next	2.4.6
node	7.7.4
OS	w10/macos/centos
browser	all
etc

Issue Analytics

State:
Created 6 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

3reactions

aviramgacommented, Oct 16, 2017

Hi @mattfca, @timneutkens, @arunoda
I got the same issue This is my getInitialProps: static async getInitialProps(ctx) { const { html, head, errorHtml, chunks } = renderPage(); return { html, head, errorHtml, chunks }; }

And changing it to static async getInitialProps (ctx) { return Document.getInitialProps (ctx) }

solves it. But can you please explain why? Im using latest NextJS.

Also where can I find documentation about document.js and all its capabilities and features?

Thanks!

3reactions

arunodacommented, Jul 19, 2017

Try to use this as getInitialProps:

    static async getInitialProps (ctx) {
      return Document.getInitialProps (ctx)
    }

Top Results From Across the Web

styled-jsx does not render server side with custom _document.js

This only happens when I use a custom _document.js, so it must be something with that page. This is the code: import Document,...

Advanced Features: Custom `Document` - Next.js

Note: This is advanced and only needed for libraries like CSS-in-JS to support server-side rendering. This is not needed for built-in styled-jsx support....

next.js - The styled-jsx does not render the ... - Stack Overflow

The styled-jsx does not render the style when the Browser has js disabled (Rollup and styled-jsx) · Enter in the root project and...

Server-side rendered styled-components with Nextjs

Basically you need to add a custom pages/_document.js (if you don't have one). Then copy the logic for styled-components to inject the server...

Server side rendering Styled-Components with NextJS - Medium

If you disable JavaScript on the browser (e.g in Chrome: Settings / Site settings / JavaScript / Blocked), you should still be able...