Razzle: Hydration of Styles Not Rendering Properly

Created on 3 Oct 2018 · 5Comments · Source: jaredpalmer/razzle

Loving razzle, such a great tool.

I am having an issue where I setup Material UI and everything is working _fantastically_ except for one thing: When visiting a sub page and refreshing the page gives me a page with only minimal styles. It's actually a fascinating bug because depending on what page was open from the last yarn start it would only render that page properly if refreshed, but if I navigate and refresh it will not work (even on the root path).

Start the server with yarn start
Go to http://localhost:3000/blog-posts for example
Refresh the page (everything looks like crap)
Kill the server (keep browser window open)
Start the server with yarn start
Refresh the page and it looks beautiful (rendering everything properly)
Navigate to _any_ another page
Refresh, looks like crap... and repeat.

I tried yarn build && yarn start:prod and the system runs, but only with minimal styles. However, if I find a link and click it then the whole application looks beautiful again.

I am assuming it's an issue with hydrate or maybe some combination of that and @material-ui/core/styles/withStyles. Are any of you encountering this issue?

The classes are different (rendered html) on subsequent page load which means it's probably related to the initial loading of isomorphic styles / classes which I am aware relates to the following discussions:

However, as my situation shows above, it seems to be working some of the time which makes me think its closer than those discussions are making it appear. Thoughts?

Source

panbanda

Most helpful comment

You'd think after long tedious hours of researching and debugging it would be a little more gratifying, but the fix is basically using after.js, react-jss, generating your own Document and then the line at the bottom of this thread (about MuiThemeProvider which is MUI related only):

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

May you all avoid the pain. :P

panbanda on 8 Oct 2018

🎉4

All 5 comments

Hahahaha I had the same problem with Material UI in Razzle 😢

CharlyJazz on 3 Oct 2018

❤4

@CharlyJazz That's very (en|dis)couraging. Haha did you try moving away from their withStyles implementation and into the isomorphic classes?

panbanda on 6 Oct 2018

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

May you all avoid the pain. :P

panbanda on 8 Oct 2018

🎉4

@jaredpalmer @jylinman Is it not possible to create an example of this for the razzle documentation?

CharlyJazz on 8 Oct 2018

To anyone else experiencing this issue I can highly recommend following the official Material-UI SSR docs: https://material-ui.com/guides/server-rendering/