BFF

Next.js에서 BFF(Backend For Frontend) 구조 이해하기

1. BFF란 무엇인가

BFF(Backend For Frontend)는 클라이언트와 실제 백엔드 서버 사이에 위치하여, 클라이언트 요청을 대신 처리하고 응답을 가공하여 전달하는 중간 서버 계층이다.

구조는 다음과 같다.

브라우저 → BFF 서버 → 실제 백엔드 서버

이때 클라이언트는 실제 백엔드 서버와 직접 통신하지 않고, 모든 요청을 BFF를 통해 처리한다.

2. 왜 BFF를 사용하는가

2.1 프론트엔드 복잡도 감소

여러 API를 직접 호출하는 경우, 프론트엔드에서 다음과 같은 문제가 발생한다.

  • 요청이 여러 번 발생함
  • 상태 관리가 복잡해짐
  • 로딩 처리와 에러 처리가 분산됨

BFF를 사용하면 여러 API 호출을 서버에서 처리한 뒤 하나의 응답으로 내려줄 수 있어 프론트엔드가 단순해진다.

2.2 데이터 가공 책임 분리

백엔드 응답은 보통 프론트에서 바로 쓰기 어려운 구조일 수 있다.

예를 들어:

{
  "monthly_cost": 50,
  "deposit": 1000
}

프론트에서는 다음과 같이 쓰고 싶을 수 있다.

{
  "priceText": "월세 50 / 보증금 1000"
}

이러한 변환을 BFF에서 처리하면, UI는 데이터 표현에만 집중할 수 있다.

2.3 인증 및 보안 처리

프론트에서 직접 백엔드 호출 시 다음과 같은 문제가 발생한다.

  • 토큰 관리 복잡성
  • API 키 노출 위험
  • CORS 문제

BFF를 사용하면 인증 헤더 추가, 쿠키 처리, API 키 관리 등을 서버에서 안전하게 처리할 수 있다.

2.4 외부 API 보호

Kakao, ODsay 등 외부 API를 사용할 경우, API 키를 브라우저에 노출하면 보안 문제가 발생한다.

BFF를 통해 외부 API를 호출하면 API 키를 서버에만 두고 사용할 수 있다.

3. 프록시와 BFF의 차이

프록시와 BFF는 유사하지만 역할에 차이가 있다.

프록시는 요청을 그대로 전달하는 역할에 가깝다.

클라이언트 → 프록시 → 백엔드

요청과 응답을 거의 가공 없이 전달한다.

반면 BFF는 프론트를 위해 데이터를 재구성한다.

  • 여러 API를 호출하여 하나로 합침
  • 응답 데이터를 가공
  • 프론트에 맞는 형태로 재설계

즉, 프록시는 얇고 BFF는 두꺼운 계층이다.

4. Next.js에서의 BFF

Next.js에서는 Route Handler를 통해 BFF를 구현할 수 있다.

예시 구조:

app/api/recommend/route.ts

동작 흐름:

  1. 브라우저가 /api/recommend 요청
  2. Next.js 서버에서 route.ts 실행
  3. 내부에서 Spring 백엔드 API 호출
  4. 필요 시 데이터 가공
  5. 응답을 브라우저에 반환

이때 route.ts는 브라우저가 아닌 서버에서 실행된다.

5. 중요한 인사이트

Next.js를 사용하면 프론트엔드 프로젝트 안에서도 서버 역할을 수행할 수 있다.

코드는 프론트엔드 레포지토리에 존재하지만, 실행은 서버에서 이루어진다.

따라서 Next.js는 단순한 UI 프레임워크가 아니라, 프론트와 백엔드 사이의 중간 계층(BFF)을 구현할 수 있는 구조를 제공한다.

6. 언제 BFF를 사용하는 것이 좋은가

다음과 같은 경우 BFF를 사용하는 것이 적절하다.

  • 여러 API를 조합해야 하는 경우
  • 응답 데이터를 가공해야 하는 경우
  • 인증 및 보안 처리가 필요한 경우
  • 외부 API를 사용하는 경우

반면, 단순 조회 API는 클라이언트에서 직접 호출해도 무방하다.

7. 이번 프로젝트에서의 적용

싸피 프로젝트에서는 프론트에서는 한번에 받아서 한번에 보여주어야 하는 것이 백엔드에서는 작성하는 사람이 여러 명이라 요청을 여러 번 보내어야 할 일이 있는데, 이를 BFF에 여러개를 병렬로 요청해서 브라우저에서는 한번만 요청하는 것 처럼 만들었다.

8. 정리

BFF는 단순한 프록시 서버가 아니라, 프론트엔드의 요구에 맞게 데이터 흐름을 재구성하고, 보안과 통신을 통제하는 서버 계층이다.

Next.js를 활용하면 이 BFF를 프론트엔드 프로젝트 내부에서 구현할 수 있으며, 이를 통해 더 안정적이고 확장성 있는 구조를 만들 수 있다.

results matching ""

    No results matching ""