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 요청을 줄여 성능 최적화를 도모할 때.

예시

• 페이지 초기 데이터 가져오기.

• 단순한 서버 측 계산이나 데이터 변환.

• 컴포넌트 상태 및 라이프사이클과 밀접하게 연관된 작업.

 

참고 자료: [https://medium.com/@shavaizali159/next-js-api-routes-vs-server-actions-which-one-to-use-and-why-809f09d5069b]