Data depending on device
Unanswered
B33fb0n3 posted this in #help-forum
B33fb0n3OP
Hey, I have a data schema and in it there is a table called "layout". On layout item determinds how it should be rendered and what's his possible inside a grid. The data fetching srverside is simple, the grid (using css grid and inlinestyle) is also simple, but how to use the correct data depending on the device?
Everything can be rendered serverside, when I would have one layout. But I have mobile & desktop.
Everything can be rendered serverside, when I would have one layout. But I have mobile & desktop.
11 Replies
@B33fb0n3 you probs have to make a server action, and call that from the client and pass in the client width and height
@B33fb0n3 that sounds pretty complicated...
It's not that complicated lol or you can always get enough data to fit a pc table, and if it's a mobile table just show that much data
B33fb0n3OP
I mean it sounds complicated to first load the components serverside, then send them to the client, only to show the client a loading animation or something else and in this time the client sends a request to the server with it's screen size to then rerender the whole tree to show the correct data? 🤔
@B33fb0n3 I mean it sounds complicated to first load the components serverside, then send them to the client, only to show the client a loading animation or something else and in this time the client sends a request to the server with it's screen size to then rerender the whole tree to show the correct data? 🤔
you cant reliably get the user's screen size on first request
thats the problem
B33fb0n3OP
Yea, that’s why I opened this thread. I saw, that npm packages exists that uses the user agent. I guess that’s also not reliable, but a way to check serverside if the client is on mobile or on desktop 🧐
What do you think?
you can try
B33fb0n3OP
I just tried it with react-device-detect, because they have a function to feed the user agent into. It seems like it works. When I request the page via my phone,the „isMobile“ variable is true (serverside) and when I am in desktop it’s false. Pretty nice, but the best way in this case? 👀
it could be