Server component with mediaQuery
Unanswered
Pyr0Lover posted this in #help-forum
I have a page with a map and a list. In small screens, it shows either on or the other, controlled by a button and searchParams. And on large screen, it shows both components adjacent.
Now the button logic works fine, what I can't figure out is how to also make the screen responsive and optimized.
I was using tailwind classes hidden lg:block but this obviously still loads the map and takes a long time. So I can't really use css to hide the map. And if I try to do a mediaQuery it would turn the whole page to a client component.
So am I missing something, or will I always need to load both components if I want the page to be responsive? If I rely only on searchParams, and the window size changes, then only one component at larger sizes will break the UI
Now the button logic works fine, what I can't figure out is how to also make the screen responsive and optimized.
I was using tailwind classes hidden lg:block but this obviously still loads the map and takes a long time. So I can't really use css to hide the map. And if I try to do a mediaQuery it would turn the whole page to a client component.
So am I missing something, or will I always need to load both components if I want the page to be responsive? If I rely only on searchParams, and the window size changes, then only one component at larger sizes will break the UI
1 Reply
Taking a look at zillow site, it seems they use next, and when I increase the window size to large, the url searchParam automatically updates to isMapVisible=true
but to know the window size, it needs to be a client component, so how can I possibly call a function from page.tsx without making the page a client component?
but to know the window size, it needs to be a client component, so how can I possibly call a function from page.tsx without making the page a client component?