React 19와 Next.js의 서버 액션

서버 액션은 브라우저가 아니라 서버에서 실행되는 비동기 함수입니다. 파일의 맨 위나 함수 본문의 맨 위에 'use server' 지시문을 작성해 표시하며, 이를 통해 프레임워크에 이 함수가 클라이언트 측에서 절대 실행되어서는 안 된다는 것을 알립니다.

서버 액션은 서버에서 실행되므로 데이터베이스 연결, 환경 비밀값, 세션 데이터, 파일 시스템 리소스를 비롯한 전체 서버 컨텍스트에 접근할 수 있습니다. 이는 브라우저가 노출하는 정보에만 접근할 수 있는 클라이언트 컴포넌트와는 근본적으로 다릅니다.

클라이언트 컴포넌트가 서버 액션을 호출하면 Next.js는 특수한 RSC 엔드포인트로 HTTP POST 요청을 자동으로 보냅니다. 프레임워크가 인수의 모든 직렬화와 전송 계층을 처리하므로 이러한 변경 작업에 필요한 fetch() 호출을 직접 작성할 필요가 없습니다.

서버 액션은 많은 변경 작업 시나리오에서 API 경로가 필요한 상황을 대신합니다. 액션 자체가 엔드포인트이므로 로직을 서버 함수로 한 번만 정의하고, 로컬 함수인 것처럼 클라이언트 컴포넌트에서 직접 호출할 수 있습니다.

서버 액션은 처음에는 Next.js에만 해당하는 개념이었지만, 리액트 19에서는 이를 리액트의 핵심 기능으로 격상했습니다. 따라서 Next.js 이외의 번들러와 프레임워크도 리액트 사양에 따라 동일한 패턴을 구현할 수 있습니다.

서버 액션은 리액트 19 RC에서 실험적 기능이지만, 처음 도입된 이후 Next.js 14 이상의 앱 라우터에서는 안정적으로 제공되어 왔습니다. 오늘날 Next.js 앱 라우터로 프로덕션 애플리케이션을 구축한다면 서버 액션은 완전히 지원되는 권장 패턴입니다.

서버 액션의 가장 중요한 보안 특성 중 하나는 비밀 정보가 브라우저에 절대 전달되지 않는다는 점입니다. 서버 액션 내부에서 사용하는 데이터베이스 비밀번호와 API 키 같은 환경 변수는 함수 본문이 브라우저로 전송되지 않으므로 클라이언트 번들에 절대 포함되지 않습니다.

HTML 폼 요소는 action 속성을 통해 서버 액션을 직접 받을 수 있습니다: <form action={myServerAction}>. 리액트는 폼 제출을 가로채 폼 데이터와 함께 서버 액션을 호출하므로, 클라이언트 측 JavaScript를 별도로 구성하지 않고도 서버에서 변경 작업을 수행할 수 있습니다.

서버 액션이 트리거되면 리액트는 액션 인수를 POST 요청 본문으로 직렬화합니다. 서버는 이를 역직렬화하고 함수를 실행한 다음 반환값을 직렬화하여 돌려보냅니다. 직렬화할 수 있는 값(문자열, 숫자, 배열, 일반 객체)만 경계를 넘어 전달할 수 있습니다.

파일의 모듈 수준에서 맨 위에 'use server'를 작성하여 서버 액션을 정의하거나, 비동기 함수의 맨 위에 'use server'를 배치하여 서버 컴포넌트 내부에 인라인으로 정의할 수 있습니다. 두 방식 모두 서버에서만 호출할 수 있는 함수를 만든다는 동일한 결과를 냅니다.

클라이언트 컴포넌트에서는 일반 비동기 함수와 동일한 방식으로 서버 액션을 가져와 호출합니다. 호출 구문은 로컬 비동기 함수 호출과 같지만 실행은 전적으로 서버에서 이루어집니다. 이 추상화 덕분에 클라이언트 컴포넌트가 깔끔하게 유지되고 fetch 상용구도 필요하지 않습니다.

다음 중 서버 액션의 보안 모델을 가장 잘 설명하는 것은 무엇입니까?

서버 액션은 'use server'로 표시된 비동기 서버 측 함수입니다. 서버 액션은 데이터베이스 연결이나 환경 비밀값과 같은 서버 컨텍스트를 클로저로 포함합니다. Next.js는 HTTP 전송을 자동으로 처리하고, 리액트 19에서는 서버 액션이 프레임워크에 종속되지 않는 기능이 되었습니다. 폼은 action 속성을 통해 서버 액션을 직접 사용할 수 있으며, 서버 액션 내부의 비밀 정보는 브라우저에 전달되지 않습니다.