[Next.js] server action과 route handler의 차이

최종욱·2025년 3월 19일

next.js

목록 보기
7/9

1. 서버 액션(Server Action)이란?

  • Next.js의 새로운 기능 중 하나로, 클라이언트 컴포넌트 내부에서 서버로 직접 호출할 수 있는 서버 전용 함수

주요 특징

1. 클라이언트와의 긴밀한 통합

  • 클라이언트 컴포넌트 내에서 함수 호출만으로 서버 로직을 실행 가능
  • 별도의 API 엔드포인트를 구성할 필요 없이, UI와 밀접하게 연동되는 기능들을 쉽게 구현 가능

2. 보안

  • 서버 액션은 서버에서만 실행되기에 민감한 정보가 클라이언트에 노출 방지
  • Ex) 폼 제출 시 입력 데이터를 서버에서 직접 처리하여 응답하는 경우

3. 개발 생산성

  • 하나의 파일 내에서 클라이언트와 서버 로직을 함께 관리할 수 있기 때문에, 코드 중복을 줄이고 빠른 프로토타이핑이 가능

요약

  • UI와 밀접하게 연관된 작업(폼 제출, 간단한 데이터 업데이트 등)
  • 클라이언트와 서버 간의 경계를 최소화해 개발하고자 할 때

2. 라우트 핸들러(Route Handler)란?

  • Next.js의 파일 기반 라우팅 시스템을 활용하여 API 엔드포인트를 구성하는 방식
  • 일반적으로 /app/api 폴더에 파일을 생성해 HTTP 메서드(GET, POST, PUT, DELETE 등)에 따라 서버 사이드 로직을 작성

주요 특징

1. 모듈화된 서버 로직

  • UI와 분리된 독립적인 API 엔드포인트를 구성함으로써, 복잡한 비즈니스 로직을 체계적으로 관리 가능
  • 파일 기반 라우팅 덕분에 프로젝트의 구조가 명확해질 수 있음
  • 즉, 어느 파일이 어떤 역할을 하는지 쉽게 파악 가능

2. 다양한 HTTP 메서드 지원

  • 하나의 라우트 파일 내에서 여러 HTTP 메서드를 처리할 수 있어, 복잡한 API 로직이나 다양한 클라이언트 요청을 효과적으로 대응 가능

3. 외부 시스템과의 연동

Next.js 애플리케이션 외부의 다른 서비스(예: 모바일 앱, 다른 웹 애플리케이션)와의 통신에 적합

  • RESTful API 서버로서 역할을 수행 가능

** RESTful(Representational State Transfer) : 간결하고 일관된 방식으로 클라이언트와 서버 간의 데이터를 교환할 수 있도록 도와주는 설계 방식

요약

  • 독립적인 API 서비스 구축 (여러 클라이언트가 호출할 수 있는 공개 API 제공)
  • 복잡한 로직이나 다양한 HTTP 메서드를 필요로 하는 경우
  • UI와 서버 로직을 완전히 분리해 관리하고자 할 때

차이점

3. 서버 액션과 라우트 핸들러의 차이점 및 선택 기준

구분서버 액션 (Server Action)라우트 핸들러 (Route Handler)
구조컴포넌트 내에 직접 포함파일 기반 API 엔드포인트
통합성UI와 긴밀하게 연동 (단순 작업에 적합)UI와 분리된 독립적 API, 외부 시스템 연동에 유리
보안서버에서 실행되어 민감한 정보 노출 위험 낮음서버 사이드에서 실행되어 보안 유지 가능
HTTP 메서드주로 단일 작업 (폼 제출 등)다양한 HTTP 메서드(GET, POST, PUT, DELETE 등) 지원
개발 생산성빠른 프로토타이핑과 코드 통합모듈화된 코드 관리로 유지보수 용이

결론

서버 액션 :

  • UI와 긴밀하게 연동된 간단한 작업을 신속하게 처리하고자 할 때 유용

라우트 핸들러 :

  • 독립적인 API를 구성해 외부 시스템과의 통신이나 복잡한 로직을 모듈화하여 관리할 때
profile
항상 “Why?”로 시작하는 프론트엔드 개발자

0개의 댓글