7장: 데이터 패칭 (정적 생성, 서버 사이드 렌더링, 클라이언트 사이드 패칭)

데이터 패칭의 세 가지 방법 이해하기 (SSG, SSR, CSR)

Next.js 15에서는 데이터를 가져와서 페이지를 구성하는 방법이 무척 다양해졌습니다. 대표적으로 정적 생성(SSG), 서버 사이드 렌더링(SSR), 그리고 클라이언트 측 패칭(CSR) 세 가지 방식을 들 수 있습니다. 각각의 패칭법은 프로젝트의 목적, 데이터의 변동성, 사용자 경험과 밀접하게 연관됩니다.

정적 생성(SSG): 빌드 시 미리 만들어 두는 페이지

홈페이지나 블로그 글처럼 자주 바뀌지 않는 데이터라면 SSG가 최적입니다. 빌드할 때 외부 API에서 데이터를 받아와 미리 HTML 파일로 만들어 두기에, 사용자가 페이지에 접근할 때 즉각적으로 완성된 화면을 받아볼 수 있습니다. 이 방식은 초반 로딩 속도가 매우 빠르고, 많은 사용자 트래픽에도 서버 부하가 적어 안정적입니다.

SSG를 적용하려면 페이지 컴포넌트에 getStaticProps 함수를 export하면 됩니다. 빌드 시간에만 호출되고, 함수를 통해 받아온 데이터가 해당 페이지에 props로 넘어갑니다. 만약, 동적인 라우트가 필요하다면 getStaticPaths를 함께 사용해 URL 경로를 미리 정의합니다. 이렇게 만들어진 페이지는 변동 사항이 없을 때 특히 뛰어난 성능을 발휘합니다.

서버 사이드 렌더링(SSR): 요청마다 최신 정보로 채우기

페이지 방문 시마다 실시간으로 데이터가 필요하다면 SSR을 선택합니다. 뉴스, 실시간 통계 등 최신 정보를 즉시 반영해야 하는 서비스에 적합합니다. 사용자가 페이지를 요청하면, 서버가 즉시 외부 데이터를 가져와 HTML을 완성해서 내려줍니다. Next.js 15에서는 페이지에서 getServerSideProps를 export하여 이 방식을 구현합니다.

SSR은 항상 최신 데이터를 보장하지만, 요청마다 서버가 데이터를 받아오고 렌더링하므로 SSG에 비해 속도 면에서는 영향을 받을 수 있습니다. 그러나 SEO와 데이터 신선도가 중요할 때는 필수적인 선택입니다.

클라이언트 사이드 패칭(CSR): 사용자의 브라우저에서 직접

페이지 첫 진입에서는 빠른 응답이 필요하나, 사용자와의 상호작용이나 필터링 등 갱신이 잦은 데이터라면 CSR이 알맞습니다. 이 방식은 브라우저에서 JavaScript를 사용해 직접 데이터를 요청하고, 필요할 때마다 뷰를 갱신합니다. Next.js에서는 useEffect, fetch, axios 혹은 SWR 같은 라이브러리를 많이 이용합니다.

CSR은 초기 로딩에서는 빈 화면으로 시작될 수도 있지만, 사용자 행동에 따라 데이터를 신속하게 갱신하는 데에 강점을 보입니다. 또한, 서버 자원을 아낄 수 있어 효율적입니다.

상황에 맞게 데이터 패칭 전략 선택하기

Next.js 15부터는 서버 컴포넌트와 클라이언트 컴포넌트를 더욱 명확히 분리할 수 있습니다. 서버에서 데이터를 미리 가져오거나 실시간으로 반영할지, 혹은 클라이언트에서 직접 갱신할지 프로젝트 목적과 성격을 먼저 고민하세요.

웹 서비스의 성장과 함께 데이터량, 트래픽, SEO 요건에 맞춘 최적의 데이터 패칭 방식을 선택하는 것이, 빠르고 쾌적한 경험을 만드는 첫걸음입니다.