io
io
PostsComments
TTCTheo's Typesafe Cult
Created by io on 5/30/2024 in #questions
How to use state management (Zustand) but still make use of "use server"
<div className="flex flex-col p-2">
  <form
    action={async () => {
      "use server";

      await deleteImage(idAsNumber);
    }}
  >
    <Button type="submit" variant="destructive">
      Delete
    </Button>
  </form>
</div>
<div className="flex flex-col p-2">
  <form
    action={async () => {
      "use server";

      await deleteImage(idAsNumber);
    }}
  >
    <Button type="submit" variant="destructive">
      Delete
    </Button>
  </form>
</div>
As you can see, from Theo's latest tutorial, we do "use server" inside of the action component of the form. I'm trying to expand the app and so I wanted to use Zustand for state management to track some other data on this 'full-image-page.tsx' but I'm unable to since that requires it to be a client component. Client components cannot have server components inside of them. The error I get when I add my Zustand logic is: Error: useRef only works in Client Components. Add the "use client" directive at the top of the file to use it. But if I were to add "use client" at the top of my file, Error: × It is not allowed to define inline "use server" annotated Server Actions in Client Components. My question is how would I be able to run the delete logic on the server without needing to embed a server component inside a client component. Thanks!
11 replies