[WEB] CSR, SSR, SSG

코드잇 스프린트 4기

8주 차 위클리 페이퍼

 

CSR(Client-side Rendering)

렌더링의 주체가 클라이언트(웹 브라우저)이다.

웹 브라우저에서 자바스크립트로 HTML을 만들어 렌더링을 진행한다.

 

과정

1. 사용자가 방문하면, 브라우저가 서버로 요청을 보낸다.

2. 서버에서 HTML 뼈대와 자바스크립트, CSS 파일 등을 보내준다.

3. 브라우저가 다운로드하는 동안 사용자는 아무것도 볼 수 없다.

4. 다운로드 완료된 자바스크립트가 실행되어 페이지를 그린다.

 

장점

서버의 부하가 비교적 적다.

초기 로딩 이후에는 비교적 빠르다.

 

단점

모든 자원을 한번에 불러와서 첫 로딩이 비교적 느리다.

자바스크립트가 실행 되어야 메타데이터가 변경되어 SEO에 불리하다.

 

 

SSR(Server-side Rendering)

렌더링의 주체가 서버이다.

서버에서 HTML을 만들어 보내준다.

 

과정

1. 사용자가 방문하면, 브라우저가 서버로 요청을 보낸다.

2. 서버에서 완성된 HTML을 보내준다.

3. 브라우저가 다운로드하는 동안 사용자는 컨텐츠를 볼 수 있다.

4. 다운로드 완료된 자바스크립트가 실행되어 HTML과 연결된다.

 

장점

초기 로딩이 비교적 빠르다.

메타데이터가 완성된 상태여서 SEO에 유리하다.

 

단점

매번 서버에 요청을 하기 때문에 서버 부하가 비교적 크다.

HTML을 새로 받기 때문에 깜빡이는 현상이 발생한다.

 

 

SSG(Static Site Generation)

미리 정적인 HTML 파일을 만들어 보내준다. 페이지의 데이터가 자주 바뀔 필요 없을 경우에 사용한다.

 

장점

미리 만들어 둔 페이지를 브라우저에 제공해서 렌더링 속도가 매우 빠르다.

메타데이터가 완성된 상태여서 SEO에 유리하다.

 

단점

모든 URL에 대해 개별 HTML 파일을 생성해야 한다. URL을 미리 예측할 수 없으면 적용이 어렵다.

 

 

감사합니다.