Hydration of Styles Not Rendering Properly

[panbanda]

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).

1. Start the server with yarn start
2. Go to http://localhost:3000/blog-posts for example
3. Refresh the page (everything looks like crap)
4. Kill the server (keep browser window open)
5. Start the server with yarn start
6. Refresh the page and it looks beautiful (rendering everything properly)
7. Navigate to any another page
8. 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:

• Demo CSS Module https://github.com/stereobooster/razzle-cssmodules
• Razzle and CSS modules #428
• className mismatch error on refresh #705

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?

[CharlyJazz]

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

[panbanda]

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

[panbanda]

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

[CharlyJazz]

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

[jacobfunch]

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