면접 - Next.js CSR SSR API 호출

⸻

질문:
Next.js 프로젝트에서 성능 최적화를 위해 “API 호출 시점을 조정”하셨다고 했는데요,
CSR과 SSR 구조에서 API 호출 시점이 성능에 어떤 영향을 주는지 설명해주시고, 왜 그 조정이 효과적이었는지 말씀해주시겠어요?

답변 스크립트:
CSR에서는 API 호출이 브라우저에서 DOM이 생성된 이후에 실행되기 때문에, 초기 화면에는 데이터가 없는 상태로 로딩 표시만 보이는 경우가 많습니다. 반면 SSR에서는 서버에서 데이터를 먼저 받아오고, 그 데이터를 포함한 HTML을 클라이언트에 전달하기 때문에, 사용자 입장에서는 페이지 로딩과 동시에 완성된 화면을 확인할 수 있습니다.

그래서 저는 페이지에 반드시 필요한 초기 데이터는 getServerSideProps를 통해 SSR 방식으로 미리 렌더링했고, 사용자 인터랙션에 따라 변경되는 데이터는 CSR 방식으로 분리해 처리했습니다.

이렇게 API 호출 시점을 조정함으로써, 사용자는 빈 화면을 보는 시간이 줄고, 초기 로딩 속도와 UX가 크게 개선되었습니다. 실제로 Core Web Vitals 지표 중 LCP(Largest Contentful Paint) 수치도 개선된 것을 확인했습니다.

⸻