서버 액션 폼은 HTML에서 출발해
action={serverAction}을 가진 폼은 클라이언트 JavaScript가 도착하기 전에도 일반 HTML POST로 제출돼. hydration이 끝나면 전체 새로고침 없이 제출하고 레이아웃 상태를 보존하는 경험으로 향상돼. JavaScript가 완전히 실패해도 핵심 변경은 계속 작동해.
| 사용 가능한 층 | 동작 |
|---|---|
| HTML만 있을 때 | 기본 POST로 서버가 처리하고 완성된 결과를 다시 불러와. |
| JavaScript가 있을 때 | 페이지를 새로 읽지 않고 제출하며 공유 상태를 유지해. |
| React 상태까지 쓸 때 | 낙관적 UI, pending 표시, transition을 더해. |
향상은 아래층을 지우지 않아
느린 네트워크, 오래된 브라우저, 실행 중 JavaScript 오류, 스크립트를 막는 확장 프로그램에서도 기본 폼이 살아 있어. 위쪽 경험이 실패해도 아래쪽 기능은 남는다는 게 점진적 향상의 핵심이야.
기본 제출을 먼저 시험해
클라이언트 스크립트를 꺼 보고 성공과 검증 오류가 모두 이해 가능한 화면으로 돌아오는지 확인해. 그다음 낙관적 반응과 애니메이션을 얹으면 기능과 장식의 경계가 선명해져.
브라우저에서 JavaScript를 끈 뒤 폼을 제출해 성공, 검증 실패, 인증 만료를 모두 시험해. 결과 페이지가 맥락을 잃지 않고 메시지와 입력을 적절히 보존해야 해. 그 기본 흐름이 완성된 다음 pending과 낙관적 상태를 올리면 어느 층이 깨졌는지 분리해서 찾을 수 있어.
점진적 향상이 모든 상호작용을 HTML만으로 복제하라는 뜻은 아니야. 핵심 거래와 저장은 기본 폼으로 남기고, 드래그 정렬이나 실시간 협업처럼 JavaScript가 본질인 기능은 명확한 요구로 다뤄. 실패해도 사용자가 데이터와 다음 행동을 잃지 않는 게 기준이야. JavaScript를 차단하고 느린 네트워크에서 같은 폼의 성공·오류 흐름을 끝까지 수행해. hydration 전 제출이 서버에 도착하고 완성된 결과로 돌아오는지, hydration 뒤에는 전체 새로고침 없이 같은 레이아웃 상태를 보존하는지 network와 화면으로 비교해. 기본 POST 뒤 redirect를 쓴다면 새로고침으로 같은 변경이 반복되지 않는지도 확인해. Post/Redirect/Get 흐름과 idempotency가 함께 있어야 JavaScript 없는 경로도 안전한 사용자 경험이 돼.