#best way to add toast in server action form

7 messages · Page 1 of 1 (latest)

opal nimbus
#

i made my component as a server side page. only i have to add toast here.but most of the toast liabary needs client to run.i dont want to make my full page client . is there any way to add toast without making component client?. (if needed i can make another client component for toast no problem on that)

ember zealotBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

deft rover
#

Technically you can avoid all “use client” by executing the action then redirect to /the-same-page?message=Success, then in the server component check for the message searchParams and render a banner if needed

#

But I wouldn’t recommend that. Use client components where you should

bold orchid
#

I assume you want to call a toast after submitting a form. Your form component should be a client component, most likely, and there you can call the toast. I've briefly written about it here if you need more guidance https://sabin.dev/blog/how-to-show-a-toast-message-when-using-server-actions-in-nextjs

Sabin Hertanu
How to show a toast message when using Server Actions in Next.js

From the moment Server Actions and Server Components came out, there's a common tendency to avoid client code. And for a good reason. We want to harness the server's power and run as little code as possible in the browser to improve our app's performance.

slender ferry
#

@bold orchid so for every form there in my app I need to create client components?