Server Components & Client Component

기본적으로 app 폴더 하위의 모든 컴포넌트는 서버 컴포넌트

 

1. 서버 컴포넌트(Server Components)

서버 컴포넌트는 서버에서 렌더링되는 컴포넌트. 클라이언트 측에서 불필요한 로딩을 줄이기 위해, 서버에서 데이터를 처리하고 HTML을 생성한 후 클라이언트에 전달한다. 그 결과, 클라이언트가 서버로부터 완성된 HTML을 받아 빠르게 렌더링할 수 있어 최초 로딩 시간이 단축되고, SEO에도 유리하다.

• 이점:
  • 초기 로딩 속도가 빠름.
  • 서버에서 직접 데이터를 처리하므로 클라이언트의 부담을 줄임.
  • 검색 엔진 최적화(SEO) 향상.

•  

2. 클라이언트 컴포넌트(Client Components)

클라이언트 컴포넌트는 브라우저에서 클라이언트 측에서 렌더링되는 컴포넌트. 일반적으로 사용자와의 상호작용이 많은 UI 요소들이 클라이언트 컴포넌트로 처리된다. 예를 들어, 버튼 클릭, 폼 제출과 같은 동적인 UI는 클라이언트 측에서 처리해야 한다.

• 이점:
  • 사용자와의 상호작용이 필요한 컴포넌트를 처리.
  • React 상태 관리나 이벤트 처리를 통해 동적인 페이지를 만들 수 있음.

3. 왜 둘 다 필요한가?

현대 웹 애플리케이션은 성능과 상호작용 모두를 중요하게 다루기 때문에 서버 컴포넌트는 성능 최적화를 위해 서버에서 처리하고, 클라이언트 컴포넌트는 동적 기능을 클라이언트 측에서 처리함으로써 최적의 사용자 경험을 제공한다. 이 둘을 적절히 결합하면,

초기 로딩 속도는 빠르게 유지하면서도 사용자와의 상호작용이 원활한 애플리케이션을 개발할 수 있다.

결론적으로, 서버 컴포넌트와 클라이언트 컴포넌트를 배우는 것은 각각의 역할을 이해하고 효율적인 웹 애플리케이션을 개발하는 데 중요하다.