Next serverActions

serverActions

서버에서 실행되는 비동기 함수

• 서버컴포넌트에 비동기 함수를 작성, 함수 본문에 'use server'를 작성한다.
• 클라이언트 컴포넌트에서는 서버액션 함수 작성불가, module로 작성 된 서버액션 함수를 import해서 사용

server action 함수 사용하는 곳

• form 태그 action prop
• formAction prop
• useTransition() 훅에서 제공하는 startTransition과 사용 (suspense 폴백의 깜박임 없이 비동기로 데이터를 받아서 처리 가능)

form 요소내에 <button>, <input type="submit">, <input type="image"> 이렇게 3가지 요소에만 formAction prop 을 허용한다.

서버 액션이 어떻게 작동하는가?

빌드단계에서 서버액션마다 고유한 40자인 랜덤한 문자열이 생긴다. Request header에 Next-Action 헤더속성에 실어 보낸다.

요청시 Next-Action 헤더가 존재하면 서버에서 서버액션 함수를 실행시켜주고 응답한다.

참고

https://medium.com/@zero86/next-js-server-action-e2e6356a58a0