form action
HTML 폼이 서버 액션 참조를 제출 대상으로 사용합니다.
Server Action
폼 제출은 서버 함수 호출과 UI 피드백으로 나뉩니다
`form action`에 서버 액션을 연결하면 API 라우트 작성은 줄어들지만, 권한 확인, 입력 검증, 캐시 재검증은 서버 함수 안에서 명시해야 합니다.
Action 요청
Next.js가 호출을 서버 함수 실행 요청으로 변환합니다.
서버 검증
FormData, 세션, 권한, 필수 값을 서버에서 다시 확인합니다.
데이터 변경
DB 쓰기, 삭제, 파일 처리 같은 서버 전용 작업을 수행합니다.
캐시 재검증
`revalidatePath`나 `revalidateTag`로 stale UI를 줄입니다.
화면 반영
반환 값, redirect, 재렌더링 결과가 사용자 화면에 드러납니다.
Client Component
클라이언트에 남기는 일
제출 상태
`useFormStatus`로 pending 버튼과 중복 제출 방지를 표현합니다.
즉시 피드백
입력 누락, 성공 알림, 폼 reset처럼 체감 응답을 담당합니다.
Server Function
서버에서 끝내는 일
신뢰 경계
클라이언트 검증을 믿지 않고 서버에서 값과 권한을 다시 봅니다.
데이터 일관성
변경 후 캐시 무효화와 redirect 여부를 같은 함수에서 결정합니다.
안전한 서버 액션
API Route를 지웠다는 사실보다, 서버 함수 안에 검증과 재검증까지 모였는지가 서버 액션 설계의 품질을 결정합니다.