React 19의 서버 액션은 e.preventDefault() 없이도 비동기적인 폼 제출을 가능하게 하는, 자바스크립트 중심의 현대적인 개발 경험을 제공했다. 하지만 팀의 야망은 거기서 그치지 않았다. 그들은 자신들이 만든 새로운 기능이, 웹의 가장 근본적인 원칙 중 하나인 ‘점진적 향상(Progressive Enhancement)’을 완벽하게 만족하는지 증명하고 싶었다.
점진적 향상이란, 가장 기본적인 기능은 어떤 환경(예: 자바스크립트가 비활성화된 브라우저)에서도 동작하도록 만들고, 그 위에 자바스크립트 같은 기술을 더하여 더 풍부한 경험을 제공하는 개발 철학이다.
“우리의 <form action={serverAction}>은 과연 자바스크립트가 꺼진 상태에서도 동작할까요?”
릴리스를 앞둔 마지막 기술 검증 회의에서, 한 엔지니어가 이 근본적인 질문을 던졌다.
그 질문에 답하기 위해, 앤드류 클라크가 직접 데모를 시연했다. 그는 Next.js로 만들어진 간단한 게시물 작성 폼 페이지를 화면에 띄웠다.
// PostForm.js
import { createPost } from './actions';
function PostForm() {
return (
<form action={createPost}>
<input name="title" placeholder="제목" />
<textarea name="content" placeholder="내용" />
<button type="submit">글쓰기</button>
</form>
);
}
먼저, 그는 자바스크립트가 활성화된 일반적인 환경에서 폼을 제출했다. 예상대로, 페이지는 새로고침되지 않았다. 대신 폼 데이터가 비동기적으로 서버에 전송되었고, 서버 액션이 실행된 후, revalidatePath에 의해 게시물 목록이 부드럽게 갱신되었다. 이것이 바로 React 19가 제공하는 최상의 경험이었다.
그리고, 그는 브라우저 개발자 도구를 열어 자바스크립트 실행을 비활성화했다.
회의실의 모든 시선이 화면에 고정되었다.
앤드류는 다시 한번 폼에 제목과 내용을 입력하고 ‘글쓰기’ 버튼을 클릭했다.
순간, 페이지 전체가 하얗게 변하더니, 잠시 후 새로운 페이지로 이동했다. 마치 2000년대 초반의 웹사이트처럼, 전형적인 ‘풀 페이지 리프레시(full-page refresh)’가 일어난 것이다. 그리고 이동된 게시물 목록 페이지에는 방금 작성한 글이 정상적으로 추가되어 있었다.
“성공입니다.”
앤드류가 나지막이 말했다. 회의실에서는 조용한 감탄사가 터져 나왔다.
이것이 어떻게 가능했을까?
비밀은 React와 Next.js 같은 프레임워크가 서버에서 페이지를 렌더링할 때 수행하는 영리한 작업에 있었다.
- 서버는
<form action={createPost}>코드를 본다. - 자바스크립트가 없는 환경을 대비하여, 이
action을 일반적인 HTML이 이해할 수 있는 URL 기반의 엔드포인트로 변환하여 실제 HTML에 렌더링한다. (예:<form action="/?_server_action=abcdef123">) - 자바스크립트가 비활성화된 브라우저는 이 폼을 일반 HTML 폼으로 취급하여, 해당 URL로 데이터를 전송한다.
- 서버는 이 특별한 URL 요청을 받아, 연결된
createPost서버 액션을 실행시킨다. - 액션 실행이 끝나면, 서버는 일반적인 웹 서버처럼 다음 페이지로의 리디렉션 응답을 보내거나, 게시물 목록 페이지 전체를 새로 렌더링하여 반환한다.
이 모든 과정이 개발자의 개입 없이 자동으로 이루어졌다.
React 19의 서버 액션은 단지 현대적인 자바스크립트 개발자만을 위한 기능이 아니었다. 그것은 웹의 가장 기본 원칙으로 회귀함으로써, 불안정한 네트워크 환경의 사용자나 스크린 리더 같은 보조 기술을 사용하는 사용자에게도 견고한 기본 기능을 보장하는, 웹 접근성과 포용성의 철학을 담고 있었다.
React는 가장 진보적인 기술을 만들면서, 동시에 가장 보수적인 웹의 가치를 지켜냈다. 이 놀라운 양립을 통해, React 19는 진정으로 모두를 위한 프레임워크로 거듭나고 있었다.
