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 요청을 줄여 성능 최적화를 도모할 때.
예시
-
페이지 초기 데이터 가져오기.
-
단순한 서버 측 계산이나 데이터 변환.
-
컴포넌트 상태 및 라이프사이클과 밀접하게 연관된 작업.