[Next.js] 서버 액션

Melcoding·2026년 2월 11일

Next.js

목록 보기

21/27

개념 설명

서버 액션은 클라이언트 측 자바스크립트가 서버에서 실행되는 함수를 직접 호출할 수 있게 만드는 기능. 기존에는 클라이언트에서 서버로 데이터를 보내기 위해 API 엔드포인트(REST API 등)를 설정하고 fetch를 사용해야 했으나, 서버 액션은 함수 정의 앞에 "use server" 지시어를 붙이는 것만으로 RPC(Remote Procedure Call) 구현 가능.

사용 상황 예시

폼(Form) 데이터 제출: 사용자 회원가입, 게시글 작성 시 별도의 API 라우트 없이 직접 DB에 저장.
데이터 뮤테이션(Mutation): 장바구니 담기, 좋아요 클릭 등 서버 상태를 변경해야 하는 상호작용.
검색 및 필터링: 서버에서 쿼리를 실행하고 결과를 즉시 반환받아 UI 업데이트.
서버 측 유효성 검사: 클라이언트 변조가 불가능한 서버 환경에서 보안 데이터 검증 수행.

기본 문법

서버 액션은 파일 상단이나 함수 내부에 지시어를 선언하여 사용.

// actions.js (서버 액션 전용 파일)
"use server";

export async function createPost(formData) {
  const title = formData.get("title");
  // DB 저장 로직 수행
  console.log("Post Created:", title);
}

// 컴포넌트 내부 사용
import { createPost } from "./actions";

export default function PostForm() {
  return (
    <form action={createPost}>
      <input name="title" type="text" />
      <button type="submit">작성</button>
    </form>
  );
}

자주 하는 실수 및 주의사항

보안 로직 누락: 서버 액션은 공개 엔드포인트와 같으므로, 함수 내부에서 반드시 사용자 권한 확인(Authorization) 필요.
대량의 데이터 전달: 인자로 너무 큰 객체를 전달할 경우 네트워크 오버헤드 발생 가능성 존재.
클라이언트 컴포넌트 내 직접 정의: 서버 액션은 별도 파일로 분리하거나 서버 컴포넌트 내에서 정의해야 하며, 클라이언트 컴포넌트 본문 안에서 직접 정의 불가.