CSR, SSR

프론트엔드 개발자는 서비스의 특성에 따라 요구되는 렌더링을 잘 이해하고 구현할 수 있어야한다.

렌더링

1. 개념

화면에 표시할 웹 페이지를 만드는 과정을 의미

2. 렌더링 과정

1) 로더가 서버로 부터 HTML을 불러옴
2) HTML을 파싱하여 DOM Tree 생성
3) CSS 파일과, 스타일 요소를 분류하여 CSSOM 트리를 생성
4) DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 생성
5) 렌더링 트리의 요소들의 크기와 위치를 계산
6) 계산된 크기와 위치에 맞게 화면에 출력

이러한 렌더링 과정중 Client와 Server 중 어느쪽에서 렌더링이 준비되느냐에 따라 CSR과 SSR로 나뉘게 된다.

Client Side Rendering (CSR)

1. CSR이란?

말 그대로 클라이언트 측에서 렌더링을 담당하는 기법이다.

2. 동작과정

(1) 사용자가 웹사이트에 방문하면 브라우저는 서버에 콘텐츠 (정적파일)을 요청한다.
(2) 서버는 script, meta, link 등 태그가 포함된 최소한의 HTML과 연결된 JS 번들을 반환한다.
(3) 브라우저는 반환받은 JS 파일을 다운로드하고 실행하면서 필요한 데이터를 API 서버에 요청한다.
(4) API에서 데이터를 받아와 자바스크립트를 활용하여 동적인 페이지(DOM)을 생성한다.
(5) 사용자가 다른 페이지를 방문하면, 서버에 HTML을 요청하지 않고, 이미 받은 자바스크립트를 이용해 렌더링 한다.

(1) localhost 호출 후 최소한의 HTML 반환
(2) 서버에서 받은 font, CSS파일과 JS파일, 이미지를 다운로드
(3) API를 통해 데이터를 받아와 동적으로 렌더링

3. 장단점

장점

• 빠른 사용자 경험 한번 로드되면 페이지 간 이동이 빠름, 새로고침 없이 SPA 처럼 동작
• 유연한 UI에 최적화 자바스크립트를 사용하여 복잡한 인터랙션과 UI를 구현하기 적합하다.
• 서버 부하 감소 초기 요청에 HTML만 전달하고 이후부터는 클라이언트에서 요청하여 렌더링하기때문에 서버 부담이 적다.
• SPA에 적합 CSR은 SPA 구조에 잘 맞다. 필수는 아님(React, Vue, Angular 등)

단점

• SEO 문제 콘텐츠가 브라우저에서 생성되므로, 검색 엔진이 콘텐츠를 크롤링하기 어렵다. 이를 해결하기 위해 SSR 이나 Hydration 같은 기술을 추가로 사용한다.
• 초기 로딩 시간 초기 렌저링 시 자바스크립트 번들을 다운로드 하고 실행해야 하므로, 첫 화면 표시까지 시간이 다소 걸린다.
• JS 의존성 브라우저가 자바스크립트를 비활성화하면 페이지 동작이 제한됨

관련된 주요 기술

• React, Vue, Angular CSR을 주로 사용하는 프레임워크들, DOM을 동적으로 관리함
• Next.js, Nuxt.js React와 Vue 기반의 프레임워크로 근래에는 CSR, SSR 모두 혼합하여 사용가능하다
• Webpack, Vite 자바스크립트 번들링과 빌드 툴로 CSR 환경에서 필수적임

CSR 최적화 전략

• 코드 스플리팅(Code Splitting) 페이지별로 자바스크립트 번들을 나눠서 필요한 부분만 로드
• Lazy Loading 필요할 때만 컴포넌트를 로드하여 초기 로딩 시간을 단축
• Hydration 서버에서 렌더링된 HTML을 브라우저에서 자바스크립트로 보강하여 동적인 상태로 전환
• 캐싱 자바스크립트와 데이터를 브라우저 캐시에 저장하여 재방문시 빠르게 로딩
• Preloading 사용자가 필요로 할 데이터를 미리 가져와 로딩 시간을 줄임

Server Side Rendering (SSR)

1. SSR이란?

말 그대로 서버 측에서 렌더링을 담당하는 기법이다.

2. 동작과정

1. 사용자가 웹사이트에 방문하면 브라우저는 서버에 콘텐츠를 요청한다.
2. 서버는 페이지에 필요한 모든 데이터 및 css까지 적용해서 렌더링 준비를 마친 HTML과 자바스크립트 코드를 브라우저에 반환한다.
3. 완전한 HTML을 클라이언트로 전달한다.
4. 브라우저는 HTML을 즉시 렌더링하여 사용자에게 보여준다.
5. 브라우저는 HTML을 렌더링한 후 자바스크립트를 다운로드하고 실행한다. 실행된 자바스크립트는 HTML과 연결되어 페이지를 동적인 SPA로 전환한다. (Hydration)

(1) localhost를 호출하여 데이터를 서버에서 페치하여 렌더링 가능한 상태로 HTML을 반환함
(2) 브라우저는 즉시 HTML을 그림
(3) 이후에 JS 파일을 다운로드 받아 동적인 상태로 바꿈 (하이드레이션)

3. 장단점

장점

• SEO 친화적 서버에서 완전한 HTML을 제공하므로 검색 엔진이 콘텐츠를 쉽게 크롤링할 수 있음 (SEO에 필수적인 페이지는 SSR로 개발해야함!!)
• 빠른 초기 렌더링 브라우저가 자바스크립트를 실행하기 전에 HTML을 렌더링하여 사용자에게 빠른 첫 화면을 제공함
• 동적 데이터 포함 서버 내부에서 데이터를 fetch하여 반영하기 때문에 최신 데이터를 반영한 HTML 생성가능

단점

• 서버 부하 증가 서버가 매 요청마다 HTML을 생성해야 하므로 부하가 증가.
• 느린 응답 시간 데이터 처리 및 HTML 생성으로 초기 응답 시간이 길어질 수 있음.
• 복잡성 증가 클라이언트와 서버에서 모두 렌더링 로직을 관리해야 함.