[Next.js] useFormStatus로 Server Action Loading 처리 해보기

Next.js의 Server Action과 Form을 사용해서 로그인 기능을 구현하고있었는데, 문득 Api 로딩처리는 어떻게하나 싶었다.

 

Client Side에서는 react-query를 사용하거나 직접 Loading 상태를 처리해주면 됐었다.

 

예시코드

....
// react-query
const { isPending } = useMutation()

if(isPending) return <Loading/>

// fetch api
const [isLoading, setIsLoading] = useState(false);

const login = async ()=>{
    setIsLoaindg(true);
    try{
        ... 로그인 로직
    }
    finally(){
       setIsLoading(false);
    }
}

if(isLoading) return <Loading/>

 

그렇지만 action은 'use server'를 사용하는 Server-Side인데 어떻게 클라이언트에서 

Server Action의 상태값을 사용할수있을까?

 

 

 

 

 

Next.js 공식문서에서는 useFormStatus hook을 사용하면 된다고 나와있다.

 

 

중요한것은 form 태그와 동일한 depth 에서 useFormStatus를 사용하게되면 form상태를 감지 할수가 없는데,

코드 예시로 살펴보자

 

작동하는 코드

// 작동함

function SubmitButton() {
  const { pending } = useFormStatus();
  // pending이 올바르게 감지됨
  console.log(pending)
  return (
    <button type="submit"> 버튼 </button>
  );
}

export function Login() {
  const [state, formAction] = useFormState(createUser, initialState)
 
  return (
    <form action={formAction}>
      <input type="text" id="email" name="email" required />
      //SubmitButton 컴포넌트로 따로 분리
      <SubmitButton>Login</SubmitButton>
    </form>
  )
}

 

작동되지 않는 코드

// 작동안함
export function Login() {
  const [state, formAction] = useFormState(createUser, initialState)
  // pending이 감지되지않음
  const { pending } = useFormStatus()
 
  return (
    <form action={formAction}>
      <input type="text" id="email" name="email" required />
      <button>Sign up</button>
    </form>
  )
}

 

form 태그 내부에 커스텀한 SubmitButton을 넣어주어야한다. 그래야 form 내부의 상태값을 캐치할수있어서

useFormStatus hook으로 값을 얻어낼수있다.

 

헷갈릴수도 있는데

SubmitButton에서 사용한 hook은 useFormStatus 이고

Form에서 action을 핸들링하기위해 사용한 hook은 useFormState이다. 잘 보고 사용하길 바란다.

 

- 참고 문서

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#pending-states

Data Fetching: Server Actions and Mutations | Next.js

https://ko.react.dev/reference/react-dom/hooks/useFormStatus#use-form-status

useFormStatus – React