10 replies

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.

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.

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!

TTC

Theo's Typesafe Cult•2y ago•

10 replies

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>

Error: useRef only works in Client Components. Add the "use client" directive at the top of the file to use it.

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.

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!

How to use state management (Zustand) but still make use of "use server"

Similar Threads

How to use state management (Zustand) but still make use of "use server"

Similar Threads

Similar Threads

Similar Threads