Form, server actions and data mutation in next 14 and 15
Unanswered
Black imported fire ant posted this in #help-forum
Black imported fire antOP
Hi there
I am starting a new project and I need some suggestions
1) Should I use server actions for mutating data and for form submission or the old way API folder mongoose mongodb way?
2) Is it better if most of my components are server components and doest it help in performance?
3) useFormState() hook is still safe to use in form and recommended in react 18.3 or 19?
I am starting a new project and I need some suggestions
1) Should I use server actions for mutating data and for form submission or the old way API folder mongoose mongodb way?
2) Is it better if most of my components are server components and doest it help in performance?
3) useFormState() hook is still safe to use in form and recommended in react 18.3 or 19?
8 Replies
Hi!
From my experience deploying Nextjs outside of Vercel
1) Server actions works great, just don't forget to check your user authorization on each
There is a good blog post to check on how to use server action safely: https://nextjs.org/blog/security-nextjs-server-components-actions
But as a general recommendation, server action is not a silver bullet, if you need an endpoint, just make one ^^
2) Since server component is the default, this is what I use the most but not holistically. If you need a client component, just use it. Remember: client component are still processed on the server.
Just don't forget: What is interesting about RSC is the combination with Suspense and streaming.
By default, an await, will block the HTTP request until fullfiled.
Try to think about what is important to show first to a user, and the fallback you want while your server is fetching data.
eg, I use https://buildui.com/recipes/await-component a lot
Another really powerful feature is https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
3) useFormState will be renamed in 19 to useActionState. The API for useActionState is nicer to use
https://react.dev/blog/2024/04/25/react-19#new-hook-useactionstate
From my experience deploying Nextjs outside of Vercel
1) Server actions works great, just don't forget to check your user authorization on each
There is a good blog post to check on how to use server action safely: https://nextjs.org/blog/security-nextjs-server-components-actions
But as a general recommendation, server action is not a silver bullet, if you need an endpoint, just make one ^^
2) Since server component is the default, this is what I use the most but not holistically. If you need a client component, just use it. Remember: client component are still processed on the server.
Just don't forget: What is interesting about RSC is the combination with Suspense and streaming.
By default, an await, will block the HTTP request until fullfiled.
Try to think about what is important to show first to a user, and the fallback you want while your server is fetching data.
eg, I use https://buildui.com/recipes/await-component a lot
Another really powerful feature is https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
3) useFormState will be renamed in 19 to useActionState. The API for useActionState is nicer to use
https://react.dev/blog/2024/04/25/react-19#new-hook-useactionstate
one more point to note:
api are stable http url, server action endpoint are not stable between deployment, so if the url need to be public, be careful to not use server action
api are stable http url, server action endpoint are not stable between deployment, so if the url need to be public, be careful to not use server action
Cape lion
@Black imported fire ant
1) If you're using the app router, the best pattern is to use Server Actions for mutating data, if you run into an issue where Server Actions doesn't fit your needs, you can always stick to a plain API route, but they should both be the same in terms of functionality offered.
2) The important thing to remember about server and client components is that [both are pre-rendered on the server](https://nextjs.org/docs/app/building-your-application/rendering/client-components#how-are-client-components-rendered), client components allow for interactivity through Javascript shipped to the client though. If you have most of your components as server components (i.e. they don't need interactivity), they will be rendered as static HTML and shipped to the client with no Javascript needed.
3) I'm unsure why you wouldn't use
1) If you're using the app router, the best pattern is to use Server Actions for mutating data, if you run into an issue where Server Actions doesn't fit your needs, you can always stick to a plain API route, but they should both be the same in terms of functionality offered.
2) The important thing to remember about server and client components is that [both are pre-rendered on the server](https://nextjs.org/docs/app/building-your-application/rendering/client-components#how-are-client-components-rendered), client components allow for interactivity through Javascript shipped to the client though. If you have most of your components as server components (i.e. they don't need interactivity), they will be rendered as static HTML and shipped to the client with no Javascript needed.
3) I'm unsure why you wouldn't use
useFormState & useFormStatus, unless there's some discussion around it that I missed. It does allow you to react to the response from the form in a client component, both are being "merged" into useActionState in React 19, so if you're using Next.js 15 RC, it'll be under that name.Just realised that someone posted a message above me 🙂 discord didn't show it until now, if I've repeated anything feel free to lmk
Black imported fire antOP
My project is pretty large and it will scale more in future so should I use Prisma, Drizzle ORM or mongodb?
Thank you @Julienng and @Cape lion
@Black imported fire ant My project is pretty large and it will scale more in future so should I use Prisma, Drizzle ORM or mongodb?
Cape lion
Depends on what you like using, I personally have been using Drizzle a lot, but a lot of people use Prisma 🙂
@Black imported fire ant My project is pretty large and it will scale more in future so should I use Prisma, Drizzle ORM or mongodb?
German Hound
I am trying to use Prisma for my project like CMS. However, I had a problem of dealing with a polymorphism. I am afraid that if I need to add a new relationship to this polymorphism later, I need to add a new data field that is usually ID to determine the relationship. This may harm the existing data.