Next.js API Routes vs. Server Actions 차이점
Next.js에서 서버 사이드 로직을 처리하기 위한 두 가지 주요 기능은 API Routes와 Server Actions입니다. 각 기능의 장단점과 사용에 대한 설명 글입니다.
Next.js API Routes
API Routes는 Next.js 애플리케이션 내에서 API 엔드포인트를 직접 생성할 수 있게 해줍니다. 데이터 가져오기, 폼 제출 등 백엔드 로직을 별도의 서버 없이 처리할 수 있어 유용합니다.
장점
설정이 간단함:
/app/api디렉토리에서 API 엔드포인트를 빠르게 생성 가능.서버리스 함수: 각 API 경로가 서버리스 함수로 배포되어 자동으로 확장됨.
Next.js 라우팅과 통합: Next.js 라우팅 시스템과 원활하게 통합됨.
단점
콜드 스타트 지연: 서버리스 함수는 비활성 상태 후 첫 요청에서 지연이 발생할 수 있음.
제한된 실행 시간: 긴 실행 시간이 필요한 작업에는 제한이 있음.
Server Actions
Server Actions는 Next.js의 새로운 실험적 기능으로, 서버 사이드 로직을 React 컴포넌트 내에 정의할 수 있습니다. 이를 통해 로직을 컴포넌트와 가깝게 배치해 코드 관리를 간소화할 수 있습니다.
장점
로직의 위치 일치: 컴포넌트 내에서 서버 사이드 로직을 정의하여 코드의 응집성을 높임.
데이터 가져오기 간소화: 별도의 API 경로 없이 데이터를 가져와 조작 가능.
성능 향상: 추가 HTTP 요청을 제거하여 지연 시간 감소 가능.
단점
실험적 기능: 안정적이지 않으며 향후 변경될 가능성이 존재.
제한된 사용 사례: 복잡하거나 장기 실행 프로세스에는 적합하지 않음.
사용 시점 비교
API Routes 사용에 적합한 경우
애플리케이션에 RESTful 엔드포인트가 필요한 경우.
컴포넌트와 독립적인 복잡한 서버 사이드 로직이 필요한 경우.
프론트엔드와 백엔드 로직을 명확하게 분리하고자 할 때.
예시
사용자 인증 엔드포인트(로그인, 회원가입).
리소스의 CRUD 작업(예: 제품, 기사).
웹훅 및 타사 서비스와의 통합.
Server Actions 사용에 적합한 경우
서버 사이드 로직을 사용 컴포넌트와 가깝게 두고 싶은 경우.
단순한 데이터 가져오기나 컴포넌트에 직접 영향을 미치는 서버 사이드 로직.
별도의 API 요청을 줄여 성능 최적화를 도모할 때.
예시
페이지 초기 데이터 가져오기.
단순한 서버 측 계산이나 데이터 변환.
컴포넌트 상태 및 라이프사이클과 밀접하게 연관된 작업.