Next.js로 애플리케이션을 빌드하려면 서버 컴포넌트와 같은 React의 최신 기능에 익숙해지는 것이 도움이 됩니다. 이 페이지에서는 서버 컴포넌트와 클라이언트 컴포넌트의 차이점, 사용시기, 권장 패턴을 살펴봅니다.
서버 및 클라이언트 컴포넌트를 사용하면 개발자는 클라이언트 측 앱의 풍부한 상호작용과 기존 서버 렌더링의 향상된 성능을 결합하여 서버와 클라이언트를 아우르는 애플리케이션을 구축할 수 있습니다.
React가 UI 구축에 대한 사고방식을 바꾼 것과 유사하게, React 서버 컴포넌트는 서버와 클라이언트를 활용하는 하이브리드 애플리케이션을 구축하기 위한 새로운 사고 모델을 도입합니다.
단일 페이지 애플리케이션의 경우처럼 전체 애플리케이션을 클라이언트 측에서 렌더링하는 대신, React는 이제 컴포넌트의 목적에 따라 렌더링할 위치를 선택할 수 있는 유연성을 제공합니다.
예를 들어 애플리케이션의 페이지를 생각해 봅시다.
페이지를 더 작은 컴포넌트로 분할하면 대부분의 컴포넌트가 비대화형이며 서버에서 서버 컴포넌트로 렌더링할 수 있음을 알 수 있습니다. 더 작은 인터랙티브 UI의 경우 클라이언트 컴포넌트를 뿌릴 수 있습니다. 이는 Next.js의 서버 우선 접근 방식과 일치합니다.
그렇다면 왜 서버 컴포넌트일까요? 클라이언트 컴포넌트 보다 서버 컴포넌트를 사용하면 어떤 이점이 있을까요?
서버 컴포넌트를 사용하면 개발자가 서버 인프라를 더 잘 활용할 수 있습니다. 예를 들어, 데이터 불러오기를 데이터베이스에 더 가까운 서버로 옮길 수 있고, 이전에는 클라이언트 JS 번들 크기에 영향을 주던 큰 종속성을 서버에 유지하여 성능을 개선할 수 있습니다. 서버 컴포넌트를 사용하면 React 애플리케이션을 작성하는 것이 아니라 PHP나 Ruby on Rails와 비슷하게 느껴지지만, React의 강력한 성능과 유연성, UI 템플릿을 위한 컴포넌트 모델을 사용할 수 있습니다.
서버 컴포넌트를 사용하면 초기 페이지 로딩이 빨리지고 클라이언트 측 JS 번들 크기가 줄어듭니다. 기본 클라이언트 측 런타임은 캐싱이 가능하고 크기를 예측할 수 있으며 애플리케이션이 성장해도 증가하지 않습니다. 추가 자바스크립트는 클라이언트 컴포넌트를 통해 애플리케이션에서 클라이언트 측 인터랙티브가 사용될 때만 추가됩니다.