Render device specific CSS on SERVER-SIDE

[anjan-kp]

Hi,

I am not sure whether this feature exists or not.
I am using tss-react with my nextJS+MUI5 application.
As of now all my CSS is rendering serverside on 1st load and working absolutely fine.
But I am wondering is there a way to render only device-specific CSS on serverside.
For example, I don't want mobile-specific CSS if a user is viewing on a desktop.
As of now a lot of CSS is being sent to the client's browser as it includes a lot of media queries.
If I can render device-specific CSS then I don't need to send media queries to the client's browser.

Thanks
Anjan

[garronej]

Hi @anjan-kp,
Could you give a concrete example of what you have in mind?
I'm not sure I get it.

[anjan-kp]

Thanks, @garronej for the quick response.
Let's consider this use case.

1. I have a button component and I want the background color to be different for different resolutions.
2. Desktop : red , Mobile : green , Tablet : blue
3. At present I am using media-query to define these break points and mention respective colors.
4. So, my CSS has 3 media queries and I am rendering[if I check view source of page] all these for every user irrespective of their device.
5. I want a solution where I will send only mobile specific CSS to a mobile user. [mobile browser will only get background:green].
6. I don't want to see media queries on my server-rendered CSS. Only mobile specific CSS will be present in view source for mobile user.
7. In that case I can reduce the size of CSS.

I hope it's clear now.

[garronej]

Ok you made it perfectly clear.
Actually, I have been wanting to solve this for years.
My motivation is not reducing size though but being able to stop using media queries (I hate them) and still have things working with SSR.
The problem is, it's very hard to implement.
We need to know on the backend for what device we should render the style, for that we need window.innerWidth and other values that are only available client side, they aren't provided by HTTP headers either.
The solution would be to use custom cookies, I already made some promising progress in that direction, take for example that custom hook that enables to persist the state of the dark mode across reload via cookie but in our case we would also need some kind of preflight to first get the size of the screen, I don't know if I can make it a smooth experience.

In a word, this is something I would like to achieve but don't count too much on it.

Another thing, while I understand the motivation for reducing the CSS size as much as possible, if we remove the media queries that aren't used, when the client size changes it will break the app.
This does happen when users rotate screens or enter split-screen mode.

I assume you already have but, if you haven't, enable gzip compression it makes a world of difference.

[anjan-kp]

Thanks, @garronej for your quick response.