Server component after client component
Answered
JJSenpai posted this in #help-forum
JJSenpaiOP
What I want to be able to do is have a server page that fetches list of documents, sends it to client component where user can select a document, then that doc id is sent to server component which will fetch all the data and pass it to 2nd client component which will render it finally. Here is a rough diagram
Answered by B33fb0n3
You can do it like this:
https://paste.gg/p/B33fb0n3/d837bec9d12c4c9b8d7af237af67124a
As you can see (no client involved). I load the page serverside, list the pages via the
You try the same: list your documents (maybe a component like
https://paste.gg/p/B33fb0n3/d837bec9d12c4c9b8d7af237af67124a
As you can see (no client involved). I load the page serverside, list the pages via the
ListPages component. Thats handled serverside. Also the preview of the page is serverside and handled via the component PagePreview. You try the same: list your documents (maybe a component like
ListDocuments) and then a preview of the document via another component like DocumentPreview18 Replies
@JJSenpai What I want to be able to do is have a server page that fetches list of documents, sends it to client component where user can select a document, then that doc id is sent to server component which will fetch all the data and pass it to 2nd client component which will render it finally. Here is a rough diagram
yea, you can do excatly that. Where do u have problems? Where is the question?
@B33fb0n3 yea, you can do excatly that. Where do u have problems? Where is the question?
JJSenpaiOP
I am unable to render server component dynamically, if I do a router.push it causes a refresh
If I do window.history.push, it does not cause re render in server component
American Chinchilla
Why fetch and pass down to the second component-
We need more details please of what your trying to accomplish
It sounds like a bad smell code (anti pattern)
We will wait for your response
American Chinchilla
@JJSenpai
JJSenpaiOP
@American Chinchilla I am trying to optimize my code
current flow is
data from params is checked on server side, if it is valid document id, I fetch the first doc data and render it
after that, on selectedDoc change there is a useEffect which will fetch data for new document
and will set new params
So I was thinking of not using the useEffect, instead sending data to server component dynamically
@JJSenpai <@338093833877323798> I am trying to optimize my code
You can do it like this:
https://paste.gg/p/B33fb0n3/d837bec9d12c4c9b8d7af237af67124a
As you can see (no client involved). I load the page serverside, list the pages via the
You try the same: list your documents (maybe a component like
https://paste.gg/p/B33fb0n3/d837bec9d12c4c9b8d7af237af67124a
As you can see (no client involved). I load the page serverside, list the pages via the
ListPages component. Thats handled serverside. Also the preview of the page is serverside and handled via the component PagePreview. You try the same: list your documents (maybe a component like
ListDocuments) and then a preview of the document via another component like DocumentPreviewAnswer
@JJSenpai does that help?
JJSenpaiOP
@B33fb0n3 It might but I figured it out for now
Thanks for help