Update database with user provided input on server component
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
Hi,
I currently have a server component that goes and retrieve contract information to display it on screen. I would like to add below my current main content a user input to update one of the fields. I'm wondering how to do so in terms of client / server component pattern since an input means a client side component.
I've already done something similar on another page for a search functionality using url parameters but this doesn't feel right for something that don't relate to search.
It saw examples of nesting a server component in a client component but if that's the cas I'm not sure what do I have to nest exactly ? A server component with a button that updates my database as a prop of a client component that manages user input ?
I currently have a server component that goes and retrieve contract information to display it on screen. I would like to add below my current main content a user input to update one of the fields. I'm wondering how to do so in terms of client / server component pattern since an input means a client side component.
I've already done something similar on another page for a search functionality using url parameters but this doesn't feel right for something that don't relate to search.
It saw examples of nesting a server component in a client component but if that's the cas I'm not sure what do I have to nest exactly ? A server component with a button that updates my database as a prop of a client component that manages user input ?
Answered by Sun bear
I hope I understood your question correct.
I would do it like this:
- Assuming the page is /contract/abc
- server component fetches contract data for contract abc
- client component has an input field for e.g. "contract type"
- user change contract type and click save
- server action
That should do the job
I would do it like this:
- Assuming the page is /contract/abc
- server component fetches contract data for contract abc
- client component has an input field for e.g. "contract type"
- user change contract type and click save
- server action
updateContract is executed and within the server action you have revalidatePath("/contract/abc")That should do the job
2 Replies
Sun bear
I hope I understood your question correct.
I would do it like this:
- Assuming the page is /contract/abc
- server component fetches contract data for contract abc
- client component has an input field for e.g. "contract type"
- user change contract type and click save
- server action
That should do the job
I would do it like this:
- Assuming the page is /contract/abc
- server component fetches contract data for contract abc
- client component has an input field for e.g. "contract type"
- user change contract type and click save
- server action
updateContract is executed and within the server action you have revalidatePath("/contract/abc")That should do the job
Answer
Asian black bearOP
Thanks a lot @Sun bear , I looked at a lot of stuff in the docs but not server actions, there's code snippets that illustrate what you are saying https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#client-components.