[프론트] 프론트 서버(BFF/SSR)

1. BFF (Backend for Frontend)

BFF는 특정 프론트엔드(웹, 모바일 앱, 데스크톱 등)에 최적화된 맞춤형 백엔드 서버를 의미합니다. 

• 배경: 마이크로서비스 아키텍처(MSA)에서 프론트엔드가 여러 백엔드 API를 직접 호출하면 데이터 가공이 복잡하고 비효율적인 문제를 해결하기 위해 등장했습니다.
• 역할:
  • 데이터 통합 및 가공: 여러 마이크로서비스에서 데이터를 가져와 화면에 맞게 정리(API 오케스트레이션)하여 전달.
  • 프론트 친화적 API: 프론트엔드 개발자가 원하는 구조의 API 제공.
  • 보안/인증: 프론트엔드-백엔드 사이의 인증 로직, CORS 정책 등을 처리하여 클라이언트 사이드 보안 강화.
• 장점: 프론트엔드의 비즈니스 로직 복잡성 감소, 클라이언트별 최적화된 데이터 제공, API 변화에 대한 유연성.
• 단점: 클라이언트별로 BFF를 관리해야 하므로 복잡성 증가, 관리/유지보수 부담. 

---

2. SSR (Server-Side Rendering) 

SSR은 서버에서 페이지를 렌더링하여 완전한 HTML을 브라우저에 보내는 방식입니다. 

• 배경: 클라이언트 사이드 렌더링(CSR)의 초기 로딩 속도 저하와 검색 엔진 최적화(SEO) 문제를 해결하기 위해 다시 주목받고 있습니다.
• 역할:
  • 초기 페이지 렌더링: 사용자가 URL에 접속하면 서버에서 데이터를 받아 HTML을 미리 생성.
  • SEO 향상: 검색 봇이 렌더링된 HTML을 쉽게 크롤링할 수 있어 검색 노출에 유리.
• 장점: 빠른 초기 로딩 속도(TTI, FCP 개선), 뛰어난 SEO.
• 단점: 서버 부하 증가, CSR 대비 페이지 이동 시 상호작용 속도가 느릴 수 있음. 

---

3. BFF와 SSR의 관계 및 활용

현대적인 프론트엔드 서버는 종종 BFF와 SSR의 역할을 모두 수행합니다. 특히 Next.js가 그 대표적인 예입니다. 

• 데이터 요청 및 렌더링: SSR을 통해 서버에서 데이터를 요청(BFF 역할)하고, 그 데이터를 사용하여 HTML을 렌더링(SSR 역할)합니다.
• 프론트엔드 개발자의 영역 확대: 과거 UI 구현에 집중했던 프론트엔드 개발자가 Node.js 기반의 BFF/SSR 서버를 직접 구축하고 관리하게 되었습니다. 

요약하자면, BFF는 '데이터의 가공'에 집중하고, SSR은 '화면의 렌더링'에 집중하여, 두 기술 모두 프론트엔드 생산성과 사용자 경험(UX)을 극대화하는 데 사용됩니다.