Server-actions and client form | Next.js | Page 1

scenic spear May 15, 2023, 10:25 AM

#

How can I use server-actions with a client form component?

timber geyser May 15, 2023, 2:30 PM

#

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#custom-invocation-using-starttransition

It means you lose progressive enhancement though.

Does the form need to be a client component?

Data Fetching: Server Actions

Use Server Actions to mutate data in your Next.js application.

scenic spear May 15, 2023, 3:06 PM

#

I have two slides, and a state variable determines what slide is active. 😉

#

the form is made up of these two slides

#

the thing is that I would like to toggle between two "slides"

#

achieve that with server components? I don't know.

timber geyser May 15, 2023, 3:13 PM

#

Depends, if both slides are in the DOM and hidden with CSS, so the formData includes both, then yes. Alternatively each slide could be its own form. There are probably various ways to achieve it depending on exactly what you're trying to do.

But, if you want to keep your existing code as similar as you currently have, then you can go the useTransition route

scenic spear May 15, 2023, 3:17 PM

#

so useTransition makes it possible to run a server action from within a client component?

#

I would choose the css method!! 😄

#

can I use variables instead of state?

#

because state can only be in client components?

scenic spear May 15, 2023, 4:30 PM

#

have found a solution.

#

thank you!

broken yarrow May 15, 2023, 4:37 PM

#

just to mention, you dont need to use this transition thing:
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#props

Data Fetching: Server Actions

Use Server Actions to mutate data in your Next.js application.

#Server-actions and client form