Next.js 14의 Server Components는 일반적인 블로그 페이지에서 번들 크기를 약 60% 줄이고 첫 페인트(first-paint) 시간을 200ms 미만으로 단축합니다. 이는 사용자가 콘텐츠를 더 빠르게 볼 수 있고, 검색 엔진은 완전히 렌더링된 HTML을 전달받을 수 있음을 의미합니다.

이번 새 버전은 Next.js로 구축된 React 앱의 기본 실행 모델을 뒤바꿉니다. 이전에는 모든 컴포넌트가 브라우저로 전송되었지만, 이제 개발자는 UI의 일부를 “Server Components”로 지정하여 백엔드에서만 실행되도록 할 수 있습니다. 해당 컴포넌트의 코드는 클라이언트에 전달되지 않으며, 브라우저에는 상호작용이 필요한 부분만 남게 됩니다.

이러한 변화가 중요한 이유

React 개발자들은 오랫동안 네트워크 요청의 범람, 비대해진 JavaScript 번들, 느린 페이지 로딩이라는 세 가지 얽힌 문제로 고심해 왔습니다. 이러한 문제는 크롤러에게 전달되는 초기 HTML이 비어 있는 경우가 많아 검색 봇이 클라이언트 측 하이드레이션(hydration)을 기다려야 하므로 SEO에도 악영향을 미칩니다. Next.js 14는 데이터 집약적인 작업을 클라이언트에서 완전히 분리함으로써 이 근본적인 문제를 해결합니다.

Server Components와 기존 모델의 차이점

  • Server Components – 서버에서 실행되며, 데이터를 가져오고, 데이터베이스와 통신하며, 일반 HTML을 출력합니다. 이들의 JavaScript는 네트워크를 통해 전송되지 않습니다.
  • Client Components – 브라우저에 머물며 버튼 클릭, 폼 제출 또는 React state나 effect를 사용하는 컴포넌트와 같은 UI 상호작용을 처리합니다.

프레임워크는 간단한 지시어를 통해 이러한 분리를 강제합니다. 파일 상단에 use client를 추가하면 Next.js는 해당 컴포넌트를 클라이언트 측 전용으로 취급합니다. 해당 마커가 없는 모든 것은 기본적으로 Server Component가 됩니다.

실제 수치

개인 블로그 페이지를 대상으로 한 간단한 실험이 그 효과를 잘 보여줍니다. fetch 호출을 Server Component로 옮기고 서버가 리스트를 정적 HTML로 렌더링하도록 설정한 결과, JavaScript 번들 크기는 60% 줄어들었고 페이지는 200ms 이내에 렌더링되었습니다.

실무적인 레이어링 패턴

  1. 하단 레이어 (Server) – API나 데이터베이스에서 데이터를 가져옵니다. 모든 프라이빗 로직은 여기에 유지하며, 서버를 벗어나지 않도록 합니다.
  2. 중간 레이어 (Server) – 가공되지 않은 데이터를 순수 HTML 마크업으로 변환합니다. 이 레이어는 React의 JSX 구문을 사용할 수 있지만 서버 전용으로 유지됩니다.
  3. 상단 레이어 (Client) – 상호작용을 위해 작고 격리된 위젯을 삽입합니다. 대표적인 예로 “좋아요” 버튼, 댓글 폼, 또는 state가 필요한 드롭다운 메뉴 등이 있습니다.

이러한 계층 구조를 따르면 사용자가 기대하는 역동적인 느낌을 유지하면서도 앱의 대부분을 가볍게 유지할 수 있습니다.

오늘 바로 시도해 볼 수 있는 단계

  1. 코드베이스를 스캔하여 오직 데이터를 가져오기 위해서만 useEffect를 사용하는 컴포넌트를 찾습니다.
  2. fetch 호출을 새로운 Server Component로 추출하고, 렌더링된 마크업을 반환하도록 합니다.
  3. 남은 상호작용 요소들을 위해 최소한의 클라이언트 컴포넌트를 생성합니다 (상단에 use client 추가).
  4. 번들 분석기(bundle analyzer)를 다시 실행합니다. 크기가 눈에 띄게 줄어든 것을 확인할 수 있을 것입니다.

use client를 여기저기 남발하는 것은 피해야 합니다. 컴포넌트가 React state, context 또는 라이프사이클 훅에 의존하지 않는다면 Server Component로 남겨두세요. 클라이언트에서 제외하는 코드가 많을수록 다운로드 크기는 작아지고 페이지는 더 빨라집니다.

핵심 요약: 데이터 페칭과 무거운 렌더링을 서버로 옮김으로써, Next.js 14는 훨씬 적은 양의 JavaScript를 전송하고, 완전히 렌더링된 HTML을 즉시 전달하며, 진정으로 필요한 곳에서 상호작용성을 유지할 수 있게 해줍니다. 그 결과 사용자과 검색 엔진 모두에게 이로운 더 빠르고 가벼운 웹 경험을 제공합니다.