Next.js 에서 api 를 호출하는 방법 3가지

 

안녕하세요.

 

Next.js 에서 백엔드 팀에서 만들어준 api 를 연동할 때 api 를 호출하는 코드를 작성 하실 텐데, api 를 호출하는 방법을 크게 3가지로 나눠볼 수 있습니다.

 

본 글은 Next.js v15 를 기준으로 작성하였습니다.

 

Next.js 에서 api 요청 시작점과 요청지

React 에서 서버 컴포넌트 및 서버 액션 기능이 생김으로 인해 Next.js 에서 api 호출에 대한 종류는 다음과 같이 분류해 볼 수 있습니다.

1. 클라이언트 사이드에서 api 호출
2. 클라이언트 사이드에서 server action 함수 호출 (server action 함수 내에서 api 호출 하는 로직이 포함된 방식)
3. 서버 컴포넌트에서 api 호출

1번은 api (백엔드) 입장에서 보면 요청지 및 요청 시작점이 모두 클라이언트 입니다.

2번은 api (백엔드) 입장에서 보면 요청지가 Next.js 가 구동되고 있는 서버이며, 요청의 시작점은 클라이언트 입니다.

3번은 api (백엔드) 입장에서 보면 요청지 및 요청 시작점이 모두 Next.js 가 구동되고 있는 서버 입니다.

 

위 내용만 봐서는 요청지와 요청 시작점 둘의 차이가 무엇인지 헷갈리실 수 있습니다.

그림과 함께 다시 정리해보면 다음과 같습니다.

 

1. 클라이언트 사이드에서 api 호출

클라이언트(브라우저)에서 바로 백엔드 서버로 api 를 호출합니다.

장점

api 를 호출하고 응답을 받기 까지 중간 과정 (Next.js 서버를 경유하는 과정) 이 없기 때문에 응답 속도에 있어서 딜레이를 많이 줄일 수 있습니다.

단점

Next.js 및 react 에서 제공해주는 캐싱 기능을 사용할 수 없습니다. 또한 백엔드의 서버 정보가 브라우저의 네트워크 탭에 모두 드러날 수 있습니다.

2. 클라이언트 사이드에서 server action 함수 호출 (server action 함수 내에서 api 호출 방식)

클라이언트에서 서버 액션 함수를 호출하면 api 호출 방식으로 Next.js 구동 서버에서 열려 있는 특정 api 를 호출하고 해당 api 에서 서버 액션 함수가 호출되며 Next.js 가 구동중인 서버에서 백엔드 api 를 호출하는 구조입니다.

장점

백엔드 서버 정보를 숨길 수 있습니다. 클라이언트에 노출 되는건 api 로부터 응답 받은 데이터와 Next.js 와 관련된 파일 및 내용들 뿐입니다. 추가적으로 Next.js 에서 커스텀한 fetch 의 캐싱 기능과 React 의 요청 메모이제이션 기능도 사용 할 수 있어서 캐싱 기능을 사용할 경우 백엔드 측에서 받는 인바운드 트래픽 및 DB 조회 비용을 줄일 수 있습니다.

단점

클라이언트에서 요청 -> Next.js 구동 서버에서 요청 -> 백엔드 api 서버 구조이므로 중간에 Next.js 구동 서버로 요청 보낼 때 추가적인 트래픽 비용이 생길 수 있습니다. (Next.js 가 구동중인 서버에 무리가 갈 수 있습니다. 하지만 저는 해당 방식으로 실무에서 작업해 봤을 때 Next.js 가 구동중인 프론트 서버에 큰 무리가 있었던 사례는 없었습니다. 이는 서비스 성격에 따라 api 가 얼마나 api 가 자주 호출되는 구조이냐에 따라 달라질 수 있으므로 그냥 참고용으로만 봐주세요.)

3. 서버 컴포넌트에서 api 호출

서버 컴포넌트에서는 주로 GET 메소드인 데이터를 조회하는 성격인 api 호출이 대부분입니다. 데이터를 생성하거나 수정하거나 삭제하거나 등의 api 는 클라이언트 사이드에서 사용자 인터랙션이 발동하면 api 호출을 1번 또는 2번 방식으로 처리할 수 있습니다.

장점

React 에서 제공하는 요청 메모이제이션 기능과 Next.js 에서 제공하는 fetch 함수의 캐싱 기능 까지 활용하면 최소한의 요청으로 캐싱된 데이터로 효율적으로 서버 컴포넌트만을 이용해 데이터를 각 컴포넌트에 공유할 수 있습니다.

단점

페이지가 새로고침 되거나 서버액션 등의 함수가 호출되면 서버 컴포넌트 전체가 리렌더링 되며 캐싱을 사용하지 않았을 경우 프론트 서버 및 백엔드 서버 모두 요청이 불필요하게 반복적으로 발생할 수 있습니다.

 

 

 

마치며

이렇듯 next.js 에서 api 를 호출 하는 방법도 다양해 졌으며, 각 회사내 사정에 따라 적당한 방법을 선택해 사용하시면 됩니다. 아니면 위 3가지 방식 모두 대응될 수 있도록 설계하신 후 개발에 들어가시는 방법도 존재합니다.

 

잘못된 내용이나 글에 미흡한 부분이 존재한다면 댓글로 공유해주시면 감사하겠습니다.