API 호출 방식(JavaScript vs Next.js)

JavaScript로 된 레거시 프론트를 Next.js 14버전으로 개발을 완료해서 배포 후 테스트 해보는데, API 서버에서 아예 응답을 해주지 않는 상황이 생겼습니다.
그래서 확인해 본 결과, 기존 시스템과 Next.js에서 API를 호출하는 방식이 다르다는 것을 알게 되었고, 이번 경험을 바탕으로 차이점과 이유를 정리하게 되었습니다.

두 가지 API 호출 패턴

패턴 A — 브라우저가 API 서버를 직접 호출

User → Browser로 웹(https://sample.com) 접근 ─────▶ https://backend.com (API 서버)

• 브라우저에서 API 서버 주소(https://backend.com/...)로 직접 요청
• 개발자도구 Network → Request URL이 API 서버 주소(https://backend.com/...)로 찍힘
• 요구사항: CORS 설정 필수, 쿠키/토큰 SameSite·Secure 정책 적용 필요
• 장점: 구조 단순, API 응답 속도가 브라우저와 API 서버 간 네트워크 속도에만 의존
• 단점: API 주소·구조가 그대로 노출, 브라우저 환경의 제약(CORS, 보안) 받음

패턴 B — 브라우저 → Next.js 서버 → API 서버 (프록시 호출)

User → Browser로 웹(https://sample.com) 접근 ─────▶ (Next.js 서버)
                                                                                                    │
                                                                                                   ▼
                                                                              https://backend.com (API 서버)

• 브라우저는 Next.js 서버로만 요청
• Next.js 서버(Node.js 환경)가 API 서버로 직접 요청 후 응답을 브라우저로 전달
• 개발자도구 Network → Request URL이 웹 도메인(https://sample.com/...)으로 찍힘
• 장점: API 주소 비공개, CORS 불필요, 토큰·시크릿 서버 보관 가능, 보안 제어 용이
• 단점: Next.js 서버에서 API 서버로 나가는 네트워크 경로가 인프라에 열려 있어야 함 (이번 장애 원인)
  • 이번 장애 원인: 운영 인프라가 레거시 패턴 A만 허용(브라우저→API)되어 있었고, 고도화 후 코드가 패턴 B(브라우저→Next→API)로 바뀌면서 Next 서버에서 API 서버로 나가는 트래픽이 방화벽에 막혀 타임아웃/403 등의 문제가 발생. 방화벽에서 Next → API 경로를 허용해 해결.

# Next.js 서버에서 API 서버로 호출이 가능한 이유

1. Node.js 런타임 - 서버에서 동작하므로 fetch, axios, DB 연결, 파일 IO 등 브라우저에서는 불가능한 작업 가능
2. 네트워크 접근 권한 - Node.js는 운영 환경(서버/컨테이너)에서 동작하므로, 네트워크 상에서 허용된 다른 서버(API 서버)로 직접 요청 가능
3. 환경 변수·시크릿 보관 - .env에 저장된 비밀 키, API 토큰을 서버 쪽 코드에서만 사용 가능

결론: Next.js는 Node.js 환경에서 실행되기 때문에, 브라우저 요청을 받아서 그 서버(Node.js) 가 API 서버로 직접 HTTP 요청을 보낼 수 있습니다.

Next.js는 프록시 패턴을 권장하나?

Next.js(App Router, 14 세대)는 서버에서 데이터를 가져오는 패턴을 강하게 권장합니다. 그 근거는 문서 전반에서 반복되는데, 핵심 포인트는 다음과 같습니다.

• 민감 정보(토큰/키) 클라이언트에 노출 방지
• CORS/쿠키 복잡성 감소
• 서버 캐싱/리밸리데이션으로 성능 최적화
• API 표면을 서버에서 안전하게 래핑 가능

참조

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-server
https://nextjs.org/docs/app/building-your-application/routing/route-handlers
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
https://nextjs.org/docs/app/building-your-application/configuring/environment-variables