폼 작업 점검표

폼 상태는 제출 전부터 캐시 갱신 후까지 이어진다

action 속성 하나로 끝내지 말고 검증, pending, 서버 결과, 재검증, 배포 후 장애 대응을 같은 흐름으로 점검합니다.

before

제출 전

  • name 속성으로 FormData 키 고정
  • 필수 입력은 HTML 제약과 서버 검증 병행
  • URL 이동 여부를 먼저 결정
pending

제출 중

  • useFormStatus로 버튼 비활성화
  • 중복 제출을 UI에서 차단
  • 낙관적 UI는 실패 복구까지 준비
server

서버 처리

  • 권한, 소유자, 스키마를 최종 검증
  • DB 변경은 액션 내부에서 실행
  • 민감 정보는 브라우저로 전달하지 않음
result

결과 표시

  • useFormState로 메시지와 오류를 받음
  • 성공 시 reset 또는 redirect 선택
  • 필드별 오류는 입력 근처에 배치
sync

화면 갱신

  • 목록은 revalidatePath나 tag로 갱신
  • 사용자별 데이터는 캐시 범위를 분리
  • 배포 후 로그로 실패 지점을 추적
progressive 자바스크립트 의존 줄이기

표준 form action을 기준으로 만들면 로딩 전이나 느린 네트워크에서도 제출 경로가 유지됩니다.

consistency 캐시와 메시지 분리

성공 메시지는 클라이언트 상태, 실제 목록 갱신은 서버 액션의 재검증으로 처리합니다.

deploy 운영 실패 대비

서버 액션 오류 로그, 입력 값 검증 실패, 재검증 누락을 배포 전 체크 항목에 넣습니다.

최종 기준

폼 컴포넌트는 사용자의 체감 상태를 담당하고, 서버 액션은 검증과 변경을 담당하며, Next.js 캐시는 변경된 화면을 다시 읽게 만드는 역할을 맡습니다.