CSR과 SSR 그리고 클라이언트 컴포넌트와 서버 컴포넌트

CSR (Client-Side Rendering)

• 모든 렌더링이 클라이언트 측에서 발생
• 과정: 브라우저가 처음에 빈 HTML 파일을 서버에서 받아오고, 그 후 JavaScript 파일을 다운로드하여 클라이언트에서 실행
• Hydration: 클라이언트 측에서 실행된 JavaScript가 서버에서 전달된 HTML을 'hydration' 과정을 통해 '활성화'한다. 즉, HTML에 상호작용을 추가하여 동적으로 변환하는 과정이다.
  • HTML이 로드되고 화면에 표시되지만, 아직 상호작용(이벤트 핸들링 등)이 불가능한 상태
  • JavaScript가 로드되고 실행되면, 이 HTML 요소들에 이벤트 리스너 등이 추가되면서 상호작용이 가능한 완전한 애플리케이션으로 변환됨

SSR (Server-Side Rendering)

• NextJS로 웹 사이트를 빌드할 때, 기본적으로 SSR을 사용함
• Nextjs에서 모든 컴포넌트와 페이지들은 먼저 서버에서 렌더됨
  ('use client' 사용 여부와 상관없음)
• JavaScript가 비활성화 되거나 느리게 load 되어도 최소한의 HTML이 있음
• 과정: 서버에서 모든 HTML을 미리 렌더링하여 브라우저에 전송합니다. 클라이언트는 즉시 완전히 렌더된 HTML을 볼 수 있다.
• Hydration: 서버에서 렌더링된 HTML을 클라이언트 측에서 가져와 다시 한 번 JavaScript로 '활성화'하는 과정
  • 이미 렌더링된 HTML 페이지가 초기 로드 시점에 사용자에게 제공됨
  • 브라우저가 추가적으로 JavaScript 파일을 다운로드하고 실행하여, 해당 HTML 요소들에 상호작용 기능을 부여함
  • 이 과정에서는 기존 HTML 구조를 유지하면서, JavaScript 로직을 적용하여 페이지를 동적으로 만드는 작업이 수행됨

CSR과 SSR의 주요 차이점

• 초기 로드 속도
  • CSR: 초기 로드 속도가 느릴 수 있습니다. 빈 HTML과 JavaScript 파일을 받아오고, 그 후 JavaScript가 실행되어야 페이지가 완전히 렌더링된다.
  • SSR: 초기 로드 속도가 빠르다. 서버에서 미리 렌더링된 HTML을 받아오기 때문에, 초기 페이지 로드가 빠르게 완료됨
• SEO
  • CSR: 검색 엔진이 JavaScript를 실행하지 못하는 경우, 빈 HTML 페이지를 인덱싱하게 되어 SEO에 불리할 수 있다.
  • SSR: 미리 렌더링된 HTML이 제공되므로, 검색 엔진이 쉽게 페이지 내용을 인덱싱할 수 있어 SEO에 유리하다.

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

• 특징
  • 실행 위치: 브라우저(클라이언트)에서 실행됩니다.
  • 역할: 사용자 인터페이스와 상호작용을 처리합니다. 예를 들어, 클릭 이벤트, 폼 입력 처리, 동적 업데이트 등.
  • 장점:
    사용자와의 즉각적인 상호작용을 가능하게 합니다.
    UI 업데이트가 빠르며, 사용자 경험을 개선할 수 있습니다.
    JavaScript를 사용하여 다양한 기능을 구현할 수 있습니다.
  • 단점:
    초기 로드 시간 증가: 많은 JavaScript를 다운로드하고 실행해야 합니다.
    SEO 최적화가 어렵습니다. (CSR만 사용하는 경우)

서버 컴포넌트 (Server Components)

• 특징
  • 실행 위치: 서버에서 실행됩니다.
  • 역할: 데이터를 서버에서 직접 처리하고, 완전한 HTML을 생성하여 클라이언트로 전달합니다. 주로 초기 페이지 로드 및 SEO 최적화에 유리합니다.
  • 장점:
    빠른 초기 로드: 서버에서 미리 렌더링된 HTML을 제공하므로, 클라이언트는 빠르게 콘텐츠를 볼 수 있습니다.
    SEO 최적화: 검색 엔진이 서버에서 렌더링된 콘텐츠를 쉽게 인덱싱할 수 있습니다.
  • 단점:
    클라이언트와의 실시간 상호작용이 제한됩니다.
    서버 부하 증가: 많은 요청을 처리해야 하므로 서버 자원 소모가 큽니다.

클라이언트 컴포넌트와 서버 컴포넌트의 주요 차이점

• 실행 위치

  • 클라이언트 컴포넌트: 클라이언트(브라우저)에서 실행
  • 서버 컴포넌트: 서버에서 실행

• 목적

  • 클라이언트 컴포넌트: 동적인 상호작용, 사용자 이벤트 처리
  • 서버 컴포넌트: 초기 HTML 렌더링, SEO 최적화

• 초기 로드 시간

  • 클라이언트 컴포넌트: JavaScript를 다운로드하고 실행해야 하므로 초기 로드가 느릴 수 있습니다.
  • 서버 컴포넌트: 서버에서 미리 렌더링된 HTML을 제공하므로 초기 로드가 빠릅니다.

• SEO

  • 클라이언트 컴포넌트: SEO 최적화가 어려울 수 있습니다.
  • 서버 컴포넌트: 서버에서 렌더링된 콘텐츠가 제공되므로 SEO에 유리합니다.