CSR vs SSR

클라이언트 렌더링 (Client-Side Rendering, CSR)

정의

클라이언트 렌더링은 HTML 페이지의 기본 구조를 서버로부터 받아온 후, 자바스크립트가 클라이언트(브라우저)에서 데이터를 받아서 HTML을 동적으로 생성하는 방식. 즉, 페이지의 렌더링 과정이 클라이언트 측에서 이루어짐

작동 원리

1. 초기 로딩: 브라우저는 서버로부터 HTML 파일, CSS 파일, 자바스크립트 파일을 다운로드함. 이 초기 HTML은 종종 빈 <div id="root"></div>와 같은 기본 구조를 포함하고 있음
2. 자바스크립트 실행: 자바스크립트 파일이 로드되고 실행되면, 클라이언트 측에서 렌더링 라이브러리나 프레임워크(예: React, Vue.js, Angular)가 동작함
3. 데이터 요청: 자바스크립트 코드가 서버에 API 요청을 보내어 데이터를 가져옴
4. DOM 조작: 가져온 데이터로 HTML 콘텐츠를 생성하여 DOM에 삽입. 이 과정에서 페이지가 동적으로 렌더링됨

장점

• 인터랙티브한 UI: 클라이언트 렌더링은 사용자와 상호작용을 통해 페이지가 동적으로 변할 수 있게 해줌
• 빠른 페이지 전환: SPA(Single Page Application)에서는 페이지 전환 시 전체 페이지를 새로 로드하지 않고 자바스크립트로 동적으로 업데이트하기 때문에 빠른 반응성을 제공
• 서버 부하 감소: 서버는 주로 API 요청을 처리하고 HTML 렌더링을 클라이언트에서 처리하므로 서버의 렌더링 부하가 줄어듬

단점

• 초기 로딩 시간: 초기 페이지 로딩 시 자바스크립트 파일을 다운로드하고 실행해야 하므로, 초기 페이지 로딩 속도가 느려질 수 있음
• SEO (검색 엔진 최적화): 검색 엔진 크롤러가 자바스크립트 렌더링된 콘텐츠를 제대로 크롤링하지 못할 수 있어 SEO에 불리할 수 있음

---

서버 렌더링 (Server-Side Rendering, SSR)

정의

서버 렌더링은 서버에서 HTML을 완전히 생성한 후 클라이언트에 전달하는 방식입니다. 즉, 서버가 데이터와 HTML을 결합하여 클라이언트에 전달

작동 원리

• 클라이언트 요청: 브라우저가 서버에 HTTP 요청을 보냄
• 서버 처리: 서버는 요청을 받아 필요한 데이터를 가져오고, 데이터와 템플릿을 결합하여 완전한 HTML 페이지를 생성
• HTML 전송: 서버가 생성한 HTML 페이지를 클라이언트로 전송
• 클라이언트 렌더링: 클라이언트는 서버에서 전송한 HTML을 바로 렌더링하고, 페이지를 사용자에게 표시

장점

• 빠른 초기 로딩: 서버가 렌더링한 HTML을 클라이언트가 받아오기 때문에 초기 페이지 로딩 속도가 빠름. 클라이언트는 완성된 HTML을 바로 표시 가능
• SEO 친화적: 서버에서 완성된 HTML을 제공하므로 검색 엔진 크롤러가 콘텐츠를 쉽게 인덱싱할 수 있어 SEO에 유리
• 자바스크립트 비활성화 대응: 자바스크립트가 비활성화된 브라우저에서도 페이지가 정상적으로 표시

단점

• 서버 부하: 서버가 모든 요청에 대해 HTML을 렌더링해야 하므로 서버에 더 많은 부하가 발생할 수 음
• 페이지 전환: 페이지 전환 시 전체 페이지를 다시 요청하고 렌더링해야 하므로 클라이언트에서의 페이지 전환 속도가 느릴 수 있음