Managing tailwind breakpoints and SSR
I asked a similar question yesterday (https://discord.com/channels/966627436387266600/1063696594140139530) but this is more about how the original problem relates to SSR.
I have a application that I developed for desktop that I am trying to make responsive. Yesterday I asked about how to access tailwind breakpoints in my js. After getting some answers and doing some more googling I came up with a custom hook for detecting screen size and stashing it in a context for any of my components to use. However, the hook is based on reading window.innerWidth and window.innerHeight inside of a useEffect() so SSR ends up kinda broken. The app loads in assuming it is a desktop app and then runs the hook and the layout shifts.
The only way I can think to avoid this is to use (for example)
className="hidden lg:block" . To me, the idea that each page has all components for every size variation baked in seems like a nightmare to manage. It also seems like it will bloat my code significantly. For instance, I am using some MUI buttons that i want to be size=large on desktop and size="medium" on mobile. If I am going to do this in tailwind alone ill need to have multiple copies of the same button in the DOM each with different props.
Is there any way to make my app responsive while doing SSR and keeping the code manageable? I would appreciate a pointer to any codebases I could look at for inspiration.2 Replies
are they drastically different or just some properties are changed?
little of each. I have some that are like the button example, some a little more meaningful like i have a sidebar that i want to turn into a bottom bar on mobile, and some that are gunna need to be completely different cause they are split-screen layouts that wont make any sense on a phone