Media queries and RSC
Unanswered
PepeW posted this in #help-forum
PepeWOP
Concerning media queries in React, I've always had 2 approaches:
1. The styling needs to change (for example: a
↳ I use a simple CSS media query
2. The template needs to change (for example: a carousel component on mobile and a mansory layout on desktop)
↳ I use a JS media query (from
However with RSC it seems not possible to use JS media queries (and it makes sense), so am I stuck using CSS media queries or is there another solution ?
1. The styling needs to change (for example: a
flex-row layout becoming a flex-col layout) ↳ I use a simple CSS media query
2. The template needs to change (for example: a carousel component on mobile and a mansory layout on desktop)
↳ I use a JS media query (from
react-responsive package). Using this approach is preferable to utilizing a CSS media query since it avoids loading all the images twiceHowever with RSC it seems not possible to use JS media queries (and it makes sense), so am I stuck using CSS media queries or is there another solution ?
3 Replies
PepeWOP
Up
@PepeW Concerning media queries in React, I've always had 2 approaches:
1. The styling needs to change (for example: a `flex-row` layout becoming a `flex-col` layout)
↳ I use a simple CSS media query
2. The template needs to change (for example: a carousel component on mobile and a mansory layout on desktop)
↳ I use a JS media query (from `react-responsive` package). Using this approach is preferable to utilizing a CSS media query since it avoids loading all the images twice
However with RSC it seems not possible to use JS media queries (and it makes sense), so am I stuck using CSS media queries or is there another solution ?
Firstly I think browsers are intelligent enough to not load images hidden by css now
Secondly you can always use client components to achieve what you want
Thirdly using css media query is the best way to do responsiveness in recent years and it is not specific to server components
Secondly you can always use client components to achieve what you want
Thirdly using css media query is the best way to do responsiveness in recent years and it is not specific to server components
PepeWOP
1. Maybe in the case of images but in more complex scenarios with more complex render logic, it means that this logic will be executed twice
2. Yeah but the goal is to use RSC ... For example I don't want the footer of my app to be a client component just because I have different templates between mobile and desktop (accordions on mobile and not on desktop)
3. Again does't it hurt the performance to render twice the same content ? And also what about SEO ? If the links of my footer are rendered twice I don't think that the crawling bots would appreciate 😅
2. Yeah but the goal is to use RSC ... For example I don't want the footer of my app to be a client component just because I have different templates between mobile and desktop (accordions on mobile and not on desktop)
3. Again does't it hurt the performance to render twice the same content ? And also what about SEO ? If the links of my footer are rendered twice I don't think that the crawling bots would appreciate 😅