Route data from Server page to Client page
Answered
English Lop posted this in #help-forum
English LopOP
I want to know how can I send information from a page to another using the router.
We are sending the information from a Server page to a Client page. How would I be able to send this information?
The information I want to send is a serializable object. Would I do it with QueryParams? Is there no better way?
We are sending the information from a Server page to a Client page. How would I be able to send this information?
The information I want to send is a serializable object. Would I do it with QueryParams? Is there no better way?
Answered by B33fb0n3
Yea, either „fetch twice“ and use cache (for example react cache, that memorize the results for one request) or fetch once on server and pass the data as props to the client component. Like that you fetch only once, but show the same set of data in server (where it’s fetched) and client (where it’s passed via props)
13 Replies
@English Lop I want to know how can I send information from a page to another using the router.
We are sending the information from a Server page to a Client page. How would I be able to send this information?
The information I want to send is a serializable object. Would I do it with QueryParams? Is there no better way?
Normally this data is saved inside your database and instead of sending a sterilized version of it, you would only send the id to the object via the url. The next request would fetch the object and get everything safely
English LopOP
I want to show the information of this object in both the server page and the client page
this means that if I use that approach I would make 2 requests for the same object
in both pages
I would prefer to have the object that I need to fetch on the server page to be "sent" to the client page where I can use the same information there
@English Lop I would prefer to have the object that I need to fetch on the server page to be "sent" to the client page where I can use the same information there
Yea, either „fetch twice“ and use cache (for example react cache, that memorize the results for one request) or fetch once on server and pass the data as props to the client component. Like that you fetch only once, but show the same set of data in server (where it’s fetched) and client (where it’s passed via props)
Answer
English LopOP
could I send it via props if I am navigating? say to a new page.
@English Lop could I send it via props if I am navigating? say to a new page.
When navigating you browser makes a new request to your server, to get the specific data of that route. So your server will be included. The server itself only has a few states and a „props“ state does not exists. Of course you can „serialize“ this object inside the url (one state that the server knows), but that’s not a good practice and also the url is limited
English LopOP
that's my original question I guess.
I can use the url params to pass but I don't think its a good idea. I don't know what would be the other options, do you have an example?
I can use the url params to pass but I don't think its a good idea. I don't know what would be the other options, do you have an example?
@English Lop that's my original question I guess.
I can use the url params to pass but I don't think its a good idea. I don't know what would be the other options, do you have an example?
Yea, the solution you searching is what I mentioned: only passing a reference to the object instead of the whole object. Of course you might need to refetch specific data and also for that caches exists
English LopOP
thanks!
@English Lop thanks!
Sure thing. Please mark solution