search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.28k stars 32.12k forks source link

Serving CSS styles externally using @material-ui/styles in SSR applications #28217

Open mmahdigh opened 3 years ago

mmahdigh commented 3 years ago

I use @material-ui/styles in a SSR project and the problem is each page CSS styles are added internally.

Are there any ways that CSS styles be used externally (i.e. in separate CSS files)?

mnajdova commented 3 years ago

JSS is automatically adding the styles used on each page in the head. What you are looking for looks much more like using plain CSS structured as you want in separate files.

Maybe phrasing the question a bit differently. Can you share what is the problem you are trying to solve?

mmahdigh commented 3 years ago

JSS is automatically adding the styles used on each page in the head. What you are looking for looks much more like using plain CSS structured as you want in separate files.

Maybe phrasing the question a bit differently. Can you share what is the problem you are trying to solve?

Hey Marija

Honestly it's a requirement set by our SEO team. I haven't spoken with them but I guess maybe they're trying to trim some kilobytes.

I'm basically looking for something like what Linaria offers, creating external CSS files in build time and serving the CSS externally rather than adding them to the head.

mbrevda commented 3 years ago

Is this what your looking for? https://material-ui.com/guides/server-rendering/

wescopeland commented 3 years ago

Is this what your looking for? https://material-ui.com/guides/server-rendering/

Unfortunately, no. This injects styles directly in the head resulting in a larger document size. We're looking for a way to take those injected styles and statically extract them into CSS files that can be served instead. While this is slightly harmful for FCP, it makes some crawlers (specifically Bingbot) happier.

mbrevda commented 3 years ago

The guide shows how to render the styles server side - you can save them to wherever you'd like.

wescopeland commented 3 years ago

The guide shows how to render the styles server side - you can save them to wherever you'd like.

Our understanding gap isn't how to get the styles needed during the server render. The understanding gap is how to serve that content statically.

mbrevda commented 3 years ago

Same as any css file, although you'll need to remove them once react loads (see the link above)

wescopeland commented 3 years ago

Same as any css file?

Great! Could you share how to extract this content statically into a CSS file?

mbrevda commented 3 years ago

See the link above, which covers a similar use case.