[NextJS] SSR 컴포넌트 vs CSR 컴포넌트 (Server Component와 Client Component), 페이지 로딩 사용자 경험 문제 해결

Next.js - Server Component와 Client Component

Next.js 13부터 app 디렉토리 구조가 도입되면서, 컴포넌트가 서버(Server) 컴포넌트인지, 클라이언트(Client) 컴포넌트인지 구분하는 것이 매우 중요해졌습니다.
이 글에서는 Server Component와 Client Component가 무엇인지, 각각 어떤 특징과 장단점을 가지는지, 그리고 언제 어떤 걸 선택해야 하는지 쉽게 정리해보겠습니다.

---

Server Component란?

Next.js에서 page.tsx나 layout.tsx 컴포넌트들은 기본적으로 Server Component입니다.
Server Component는 서버에서 렌더링되고, 최종 결과만 HTML로 브라우저에 전달됩니다.

✅ Server Component의 장점

• 페이지를 렌더링할 때 자바스크립트 번들링이 거의 필요 없다.
• 결과적으로 페이지 로딩 속도가 빠르다.
• SEO에 유리하다 (서버에서 완성된 HTML 제공).

❌ Server Component의 단점

• 브라우저 전용 기능을 쓸 수 없다.
  • useState, useEffect 같은 React Hook 사용 불가
  • onClick, onChange 같은 이벤트 핸들링 불가
  • 비동기 스트리밍이 없다면 사용자는 항상 전체 페이지를 기다려야 한다.
• HTML 안에 자바스크립트를 직접 넣을 수 없다.

---

Client Component란?

컴포넌트 파일의 맨 위에 'use client'; 를 선언하면, 그 아래에 작성하는 모든 컴포넌트는 Client Component가 됩니다.

Client Component는 브라우저에서 자바스크립트로 직접 실행되며, 우리가 익숙한 React 방식으로 동작합니다.

✅ Client Component의 장점

• 자유롭게 자바스크립트 기능을 넣을 수 있다.
  • useState, useEffect 사용 가능
  • 버튼 클릭 이벤트(onClick) 등 사용자 인터랙션 가능
• 복잡한 UI 상태 관리나 사용자 입력 처리에 유리하다.

❌ Client Component의 단점

• 페이지 용량이 커지고 로딩 속도가 느려질 수 있다.
• Hydration 과정이 필요하다.
  • 서버가 HTML을 먼저 보내고,
  • 브라우저가 HTML을 읽은 뒤 자바스크립트 문법을 적용하는 복잡한 과정을 거친다.
  • 이 때문에 로딩이 느려지거나 초기 렌더링이 딜레이될 수 있다.

---

Server와 Client Component를 어떻게 나눠야 할까?

• 큰 단위의 페이지나 정적인 페이지는 Server Component로 만든다.
  (렌더링은 서버에서 하고, 가볍게 보내자.)
• 클릭 이벤트, 동적인 UI 처리 등 자바스크립트 기능이 필요한 부분만 Client Component로 만든다.
  • 초기 로딩을 빠르게 하기 위해, 정적 콘텐츠는 서버에서 먼저 렌더링하고
    데이터는 클라이언트에서 비동기로 불러오는 전략이 사용자 경험에 유리함‼️ (컴포넌트 세분화)

---

✨ 정리

 

	서버 컴포넌트	클라이언트 컴포넌트
기본 사용 위치	page.tsx, layout.tsx	'use client' 선언한 컴포넌트
장점	빠른 로딩, 적은 JS 번들 크기	자유로운 자바스크립트 기능 구현
단점	자바스크립트 기능 사용 불가	페이지 용량 증가, Hydration 비용 발생
추천 사용처	정적 페이지, SEO 필요한 곳	동적 인터랙션, 사용자 입력 처리

---