CSR vs SSR

서버사이드와 클라이언트 사이드란?

웹 개발은 크게 두 영역으로 나뉜다.
바로 서버 사이드와 클라이언트 사이드로 나뉘는데 이 둘은 웹사이트나 애플리케이션이 작동하는 데 필수적인 역할을 분담한다.
쉽게 말하면 클라이언트 사이드는 프론트엔드
서버 사이드는 백엔드를 말한다.

💿 서버 사이드 렌더링 (Server-Side Rendering)

전통적인 웹 개발 방식이며 (JSP / PHP), 페이지 구성의 대부분을 서버 사이드에서 담당한다.
따라서 렌더링 주체는 서버이며 서버는 클라이언트의 요청에 따라 DB 에서 데이터를 가져와 온전히 HTML 을 채운 후 응답한다.

• 장점 : 초기 로딩 속도가 빠르고 SEO (검색엔진 최적화) 에 유리하다.
• 단점 : 페이지 이동 시 매번 서버에 요청하고 전체 페이지를 다시 로드해야하므로, 사용자 경험이 끊길 수 있다. (화면 깜빡임)

🖥️ 클라이언트 사이드 렌더링 (Client-Side Rendering)

React, Vue, Angular 같은 SPA (Single Page Application) 프레임워크에서 사용하는 방식이며, 페이지 구성의 대부분을 클라이언트 사이드에서 담당한다.
따라서 렌더링 주체가 클라이언트이며 클라이언트의 JS 가 실행되어 서버에 API 통신 요청을 보내고 서버는 JSON / XML 등 데이터만 응답하며 받은 데이터로 JS 가 동적으로 페이지를 구성한다.

• 장점 : 페이지 이동 시 필요한 데이터만 서버와 통신하므로, 전환이 빠르고 사용자 경험이 매끄럽다.
• 단점 : 최초 로딩 시 JS 파일을 모두 다운로드하고 실행해야하므로, 초기 로딩 시간이 오래 걸리고 SEO 에 불리하다.