클라이언트가 백엔드 api를 직접 호출할 때 발생하는 여러 문제를 해결하기 위해, 프론트엔드를 위한 보조 서버를 두는 방식
클라이언트와 백엔드 사이에서 데이터 가공 및 전달을 담당하며, 이를 통해 프론트엔드가 효율적으로 동작할 수 있도록 도와줌
-
BFF는 MSA(Microservices Architecture)환경에서 여러 API로부터 받은 데이터를 조합 및 가공하기 위해 활용
과거 모놀리식 아키텍처에선 단일 백엔드 서버가 모든 로직 처리, 프론트엔드는 서버로부터 받은 데이터를 단순히 렌더링하는 역할
but
MSA로 전환하면서 프론트엔드는 여러 서비스의 API 호출해야했고, 이 데이터들을 조합하거나 가공해야하는 부담이 생김
즉, API 호출수가 늘어나고, 클라이언트 코드의 복잡도가 증가하는 문제가 발생
BFF는 이러한 문제 해결 위해 중간 계층 역할을 하며 여러 API에서 데이터를 받아 프론트엔드가 필요로 하는 형태로 가공하여 전달
이를 통해 클라이언트 단의 불필요한 API호출 줄이고, 프론트엔드의 복잡도 낮추면서 최적화된 데이터 제공이 가능 -
BFF는 다양한 플랫폼 환경에 맞는 데이터로 가공하기 위해 활용
웹, 모바일, 스마트 TV 등 여러 종류의 프론트엔드 플랫폼 등장하면서, 각 플랫폼에 적합한 데이터 형식과 응답 구조가 필요하게 됨
ex - 웹 애플리케이션은 상대적으로 복잡한 데이터 구조를 받아도 큰 문제가 없지만, 모바일 애플리케이션의 경우 네트워크 비용을 줄이기 위해 최소한의 데이터만 요청하는 것이 유리
BFF를 활용하면 각 플랫폼의 특성에 맞춰 데이터를 변환하거나 선택적으로 제공할 수 있으며, 이를 통해 성능 최적화도 이룰 수 있음
이외에도 API 키 및 인증 정보 관리, CORS 문제 해결 등 클라이언트 단에서 발생할 수 있는 다양한 이슈를 효과적으로 해결할 수 있음
또한 백엔드 시스템 변경 시 프론트엔드 코드의 수정 범위를 최소화하는 역할도 수행할 수 있어 유지 보수성을 높이는데 도움이 되기도 함
next.js의 라우트 핸들러(route.ts)가 가장 이해하기 적합한 예시같음
