Gatsby with Material-UI: Why createPageContext?

Question

I was going through the gatsby example on the material-ui project page on github and hoping for an explanation of a few codelines.

In the file getPageContext.js

export default function getPageContext() {
  // Make sure to create a new context for every server-side request so that data
  // isn't shared between connections (which would be bad).
  if (!process.browser) {
    return createPageContext();
}

Why would data be shared between connections?

I would expect a warning about this behavior somewhere in the Material-UI documentation but it is nowhere to be found. This seems so important that I wonder why it is buried in a code example.

This question seems to be related however the linked github issue + discussion do not help me understand why there is this workaround with the page context.

Thanks!

Answer 1

The PageContext as illustrated in the example is implemented to have a proper CSS injection order as outlined here :

The CSS injected by Material-UI to style a component has the highest specificity possible as the is injected at the bottom of the to ensure the components always render correctly.

The important bit is in withRoot.js :

  return (
    <JssProvider generateClassName={this.muiPageContext.generateClassName}>
      {/* MuiThemeProvider makes the theme available down the React
          tree thanks to React context. */}
      <MuiThemeProvider
        theme={this.muiPageContext.theme}
        sheetsManager={this.muiPageContext.sheetsManager}
      >
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...this.props} />
      </MuiThemeProvider>
    </JssProvider>
    );

This thread gives insight into what happens if you don't work with a pageContext.