routing on server action

[velvet snow]

hi, from a server action i want to redirect into a specific page and also include an object that going to be sent into the page how i can do that ? i've seen userouter but he can be used only inside client component and redirect can't include data. Thank you

[wanton reef]

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)

[wraith mist]

few choices

1. return the data in server action and handle redirection in client component
2. embed the data as the searchParam of url when using redirect()
3. save teh data in cookie first before redirect()-ing

[velvet snow]

I think im going to use the cookies method thank you! also i didn't understand the first option can you please enlighten me

[wraith mist]

Server Action can be run in client components

you can do this const result = await serverAction()

just check the result of result and do stuff conditionally in the client

if(A) then router.push("somewhere")

[velvet snow]

like this ? ``'use client'

import { getCoiffeur } from "@/app/actions";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useRouter } from 'next/navigation';

const SearchForm = (): JSX.Element => {
const result = await getCoiffeur();
return (
<form action={getCoiffeur} className="w-96 z-20 pr-8 flex flex-col gap-4">
<Input type="text" placeholder="Prestation, nom du coiffeur..." className="bg-transparent backdrop-blur-lg placeholder:text-white/75 text-white" />
<Input type="text" placeholder="Adresse, ville" className="bg-transparent backdrop-blur-lg placeholder:text-white/75 text-white" />
<Button variant="outline">Chercher</Button>
</form>
)
}`

[wraith mist]

its slightly different

coz you can't retrieve value returned in action={getCoiffeur}

so you have to use onSubmit()

and get all the data of the input first with react

export default function MyForm() {
  function handleSubmit(e) {
    // Prevent the browser from reloading the page
    e.preventDefault();

    // Read the form data
    const form = e.target;
    const formData = new FormData(form);

    // You can pass formData as server action:
    const res = await serverAction(formData);
    
    // Do something else based on ress

  }

  return (
    <form method="post" onSubmit={handleSubmit}>
      <label>
        Text input: <input name="myInput" defaultValue="Some initial value" />
      </label>
      <hr />
      <label>
        Checkbox: <input type="checkbox" name="myCheckbox" defaultChecked={true} />
      </label>
      <hr />
      <p>
        Radio buttons:
        <label><input type="radio" name="myRadio" value="option1" /> Option 1</label>
        <label><input type="radio" name="myRadio" value="option2" defaultChecked={true} /> Option 2</label>
        <label><input type="radio" name="myRadio" value="option3" /> Option 3</label>
      </p>
      <hr />
      <button type="reset">Reset form</button>
      <button type="submit">Submit form</button>
    </form>
  );
}

https://react.dev/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form Source, slightly modified for Server Action

[velvet snow]

Oookay and i guess that the <form action={serveraction} > method should be a better choice only when the client component doesnt need the result right or I'm completely off the mark ?

[wraith mist]

not completely

[velvet snow]

in which case it should be efficient to use it ?

[wraith mist]

wait

like 99% completely

coz like maybe in the future theres a wrapper to receive the return value of action={}

for example: https://react.dev/reference/react-dom/hooks/useFormState

you can return a value from a server action but if you put it in action={} you wont be able to read them
but with useFormState you can get the returned value here https://react.dev/reference/react-dom/hooks/useFormState#using-information-returned-by-a-form-action

[velvet snow]

ok thank uu

[velvet snow]

i found this on react doc https://react.dev/reference/react-dom/components/form ``export default function Search() {
function search(formData) {
const query = formData.get("query");
alert(You searched for '${query}');
}
return (
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>
);
}` is action a generic name ? because in the example they can handle the function they passed to action inside the client component

[wraith mist]

That looked like client action to me

and it was only announced recently

you can try if you want and let us know if it works