Next.js Discord

Discord Forum

Good approach for toasts in server only components

Unanswered
Cinnamon posted this in #help-forum
Open in Discord
CinnamonOP
I understand that for toasts to work I have to use them inside of client components. But sometimes I have a lot of RSC in my application that I dont wanna have to split up to support toasts with "use client" for each occassion. Example component: 
export function GenerateAPIKeySection({ projectId }: { projectId: number }) {
  async function generateApiKey() {
    "use server";

    await serverApiClient.post("/ApiKey/:projectId", undefined, {
      params: { projectId: projectId },
    });

    revalidatePath(`/admin/${projectId}`);
  }

  return (
    <>
      <CalloutRoot mt="5">
        <CalloutIcon>
          <InfoCircledIcon />
        </CalloutIcon>
        <CalloutText>Es wurde kein gültiger API Key gefunden.</CalloutText>
      </CalloutRoot>

      <form action={generateApiKey} className="mt-3">
        <SubmitButton type="submit">Neuen API-Key generieren</SubmitButton>
      </form>
    </>
  );
}


I think a client component that renders a toast based on a set cookie from the server should do the trick, does anyone have a reference implementation or do I have to make it from scratch?

3 Replies

fuma
It is not recommended, toasts are supposed to be client components since reading cookies will opt your page into SSR (rendered at request time).
And they're re-rendered regularly, implementing it in server components is worth nothing and a waste of performance and server resources.

You should mark your form into a client component if you want advanced interactivity. That is what client components supposed to do.
You can import Server Actions from a file marked with use server directive, it won't affect your actual code
joulev
[client components are not bad and should be used if they are needed](https://www.youtube.com/watch?v=6jM_0wDOw4g)