Best practise for forms and server side rendering
Answered
Sun bear posted this in #help-forum
Sun bearOP
Hello. I have a form with a checklist, however as soon as I update the checkbox and make a request to update the checkbox the the backend, the new checkbox state is not rendered. Only when I reload the page is it re-rendered. I'm was using server actions, but that was causing problems.
I would like to
- fetch data from the backend, server side
- let the user select a checkbox in a list
- update the checkbox state on the client
- send a request to update update the checkbox state in the db
Where can information on mixing server side components and clients side components in forms and best practises around that. Especially when dealing with server side data. It's a pretty common scenario but I would just like more clarity.
I would like to
- fetch data from the backend, server side
- let the user select a checkbox in a list
- update the checkbox state on the client
- send a request to update update the checkbox state in the db
Where can information on mixing server side components and clients side components in forms and best practises around that. Especially when dealing with server side data. It's a pretty common scenario but I would just like more clarity.
Answered by European sprat
fetch in server component and pass as props to client component is pretty standard
7 Replies
European sprat
If it's an interactive form which has interactivity and reflects state from your db then the form should be a client component
Sun bearOP
Thanks ðŸ‘. That's what I thought and to be fair the form itself is a client component. It's just wrapped in a server component which is responsible for fetching the initial data
Sun bearOP
I'm still not sure what the best way is moving forward
Do we still fetch our initial form data server side? Or do the fetching client side as well?
European sprat
fetch in server component and pass as props to client component is pretty standard
Answer
European sprat
there's similar stuff you can do with react-query for prefetching and having it used in client component too
Sun bearOP
Thank you :). I was also already doing what you suggested. Turns out I was accidentally calling set state on the wrong value. Nothing to do with SSR. But thank you for your answers! It helped me stop going down the wrong path of investigation.