Is there a way to use a server action in this scenario?
Answered
Noronha posted this in #help-forum
NoronhaOP
Let's say I have a
Alright now we inside this form, we should have a
ClientPage that is server-side and that renders a <ClientForm /> component that is a client component. Alright now we inside this form, we should have a
<CitySelector /> component that when the user selects a "State", we'll fetch all cities from that state and render in a select/combobox. Is there a way that we can make CitySelector use server actions to fetch this data or I'll have to 100% of the time fallback to fetch?Answered by Ray
yeah I think you could do something like this
<select
onChange={async (e) => {
const result = await action(e.target.value);
setResult(result);
}}
></select>3 Replies
@Noronha Let's say I have a `ClientPage` that is server-side and that renders a `<ClientForm />` component that is a client component.
Alright now we inside this form, we should have a `<CitySelector />` component that when the user selects a "State", we'll fetch all cities from that state and render in a select/combobox. Is there a way that we can make CitySelector use server actions to fetch this data or I'll have to 100% of the time fallback to fetch?
yeah I think you could do something like this
<select
onChange={async (e) => {
const result = await action(e.target.value);
setResult(result);
}}
></select>Answer
NoronhaOP
Oh wow, I'm literally using server actions inside client-components when handling forms (to save/update stuff and even delete stuff), but I didnt even think of fetching data on event handlers. Thank you @Ray , you're the man.
@Noronha Oh wow, I'm literally using server actions inside client-components when handling forms (to save/update stuff and even delete stuff), but I didnt even think of fetching data on event handlers. Thank you <@743561772069421169> , you're the man.
yeah you could use server action with form, event handler and useEffect
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#non-form-elements
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#non-form-elements