Hi - thanks for taking the time to read.

I'm fetching some users via a server action. After they are retrieved, I map over them to display them. I am trying to add a delete button next to each user. I am confused about implementing the delete functionality from the form's end. Here is the code:

import { fetchUsers } from './_actions';

export default async function UserList() {
  const users = await fetchUsers();

  if (!users || users.length === 0) {
  } else {
    return (
      <div>
        <h2>Users</h2>
        {users.map((user) => (
          <div>
            <div>{user.name}</div>
            <div>{user.email}</div>
            <form action={deleteUser}>
              <button>Delete</button>
            </form>
          </div>
        ))}
      </div>
    );
  }
}

I have not implemented the deleteUser() server action yet, that depends on how I send the user data.

Question 1: What method must be employed to obtain and send the user in the delete button form?
What I've considered: I can add a hidden input in the form with the user's data. Is that the right way of going about it?

Question 2: What format should I send the user's data in? How can I send the entire user object via the form?
What I've considered: I could just send over user.id and use that to find the user. Is that wise? - is there any 'best practice'/recommended way of what I should send in order to locate the user? I am still interested to know how I would send over the whole user object, in case I wanted other user info.

Question 3: Should my 'users' data be fetched from a client component? Is there any distinction if it is fetched form the server or the client?

Thanks for any help!