[Basic] Client Side Rendering vs Sever Side Rendering

1. Client-Side Rendering (CSR)

Client-Side Rendering에서는 초기 HTML 페이지가 빈 상태로 브라우저에 전달되고, JavaScript가 로드된 후에 클라이언트에서 동적으로 페이지를 렌더링합니다. 모든 렌더링 작업은 브라우저에서 이루어지며, 사용자 인터페이스가 완성되기 전까지는 JavaScript가 완전히 실행되어야 합니다.

• 동작 방식: 브라우저가 HTML과 함께 JavaScript 파일을 다운로드하여 실행한 후, React 컴포넌트가 클라이언트에서 렌더링됩니다.
• 장점: 페이지 이동이 빠르고, 동적 콘텐츠 로딩에 유리합니다.
• 단점: 첫 페이지 로딩 속도가 느릴 수 있으며, SEO(검색 엔진 최적화)에 불리할 수 있습니다.

2. Server-Side Rendering (SSR)

Server-Side Rendering은 요청이 들어올 때 서버에서 HTML을 미리 렌더링하여 완성된 HTML을 클라이언트에게 보내는 방식입니다. JavaScript가 모두 실행되기 전에 브라우저는 이미 렌더링된 HTML을 받아서 화면에 표시합니다.

• 동작 방식: 서버가 페이지를 먼저 렌더링하여 클라이언트에 전달하고, JavaScript는 그 후에 로드되어 페이지의 동적 기능을 활성화합니다.
• 장점: 초기 로딩 속도가 빠르고, SEO에 유리합니다. 첫 번째 요청에 완전한 HTML이 브라우저에 전송되므로 검색 엔진이 내용을 더 쉽게 크롤링할 수 있습니다.
• 단점: 서버 부하가 커질 수 있으며, 사용자가 상호작용하기 전에 페이지가 완전히 로드되어야 합니다.

주요 차이점 요약

 

렌더링 위치	클라이언트(브라우저)	서버
초기 로딩 시간	느림	빠름
SEO	불리함	유리함
서버 부하	낮음	높음
페이지 동적 갱신	더 빠른 페이지 전환	새로운 요청마다 서버가 처리해야 함

 

Next.js는 기본적으로 하이브리드 렌더링을 지원하여, 특정 페이지나 컴포넌트에서 CSR과 SSR을 선택적으로 사용할 수 있습니다. 예를 들어, getServerSideProps를 사용하면 서버에서 데이터를 가져와 SSR을 수행하고, useEffect나 getStaticProps 등을 사용하면 CSR이나 정적 사이트 생성(SSG)을 사용할 수 있습니다.