"use server" file vs "use server" function

import { userSignUp } from "~/api/server";


export function SignUp() {
  return (
    <div class="flex flex-col items-center justify-center h-screen">
      <h1 class="text-2xl font-bold">Sign Up</h1>
      <form action={userSignUp} method="post">
        <input class="border-2 border-gray-300 rounded-md p-2" type="email" name="email" />
        <input class="border-2 border-gray-300 rounded-md p-2" type="password" name="password" />
        <button class="bg-blue-500 text-white rounded-md p-2" type="submit">Sign Up</button>
      </form>
    </div>
  );
}

import { action } from "@solidjs/router";
import { supabase } from "~/supabase/client";

export const userSignUp = action(async (formData: FormData) => {
  "use server";
  const email = formData.get("email");
  const password = formData.get("password");

  if (!email || !password) {
    throw new Error("Email and password are required");
  }

  const { data, error } = await supabase.auth.signUp({
    email: email as string,
    password: password as string,
  });

  if (error) {
    throw new Error(error.message);
  }

  return data;
}, "userSignUp");