Material UI 1.0 - Server Side Rendering & Performance

[Sydney-o9]

Material UI @next was designed for server-side rendering and this is absolutely fantastic:

Material-UI was designed from the ground-up with the constraint of rendering on the Server, but it's up to users to makes sure it's correctly integrated.

Implementing it into our project however, we run into performance issues when rendering on the server side.

I bet for a wrong implementation on our end - material-ui fires quickly on the client and I would not believe that JSS is an issue either.

... but it's up to users to makes sure it's correctly integrated

However, this is hard to debug and I think many people would think it comes from the library rather than their/our wrong implementation. From what I understand, this is why material-ui @next is replacing material-ui 0.* with all performance issues solved thanks to new Overrides Solutions.

Is there anything we can do to help you guys in regards to making sure Material-UI is implemented properly for SSR. For example, is there a repo in place for SSR with some benchmarks on it?

That would show that:

  const html = renderToString(
    <JssProvider registry={sheetsRegistry} jss={jss}>
      <MuiThemeProvider theme={theme} sheetsManager={new Map()}>
        <App />
      </MuiThemeProvider>
    </JssProvider>
  )

and this:

  // Grab the CSS from our sheetsRegistry.
  const css = sheetsRegistry.toString()

is blazing fast and is not the bottleneck in SSR performance.

For now, we have a very lagging and slow SSR and really want to come up with solutions which can potentially benefit others. Let me know if I can help.

---

(Note: Thank you for open sourcing such a great work - amazing repo and amazing work from the community)

[oliviertassinari]

For example, is there a repo in place for SSR with some benchmarks on it?

We have no performance benchmark, but one issue to add some: #4305.
I'm gonna close this issue as not actionable. I'm sorry but saying it's slow won't help. It can only increase #4305 priority.

Still, I have been experiencing a SSR inefficiency lately. I was using react-apollo to traverse the react tree and extract query before rendering them with react. I have noticed that I was generating the styles twice and that the styles generation with JSS takes x0.5 the time it takes react to output the HTML. I have added a disableStylesGeneration option to address this issue.