Client Side Rendering(CSR) Sever Side Redering (SSR) Static Site Generation (SSG)

Client Side Rendering (CSR)

클라이언트 사이드 렌더링이란 서버로부터 모든 파일을 받아 클라이언트에서 렌더링 하는 방식

 

유저가 요청시 서버에서는 뼈대만 있는 HTML과 JS 및 렌더에 필요한 자원을 보내주고 브라우저에서 렌더

 

CSR은 브라우저가 뼈대만 있는 HTML을 받고 JS 파일을 다운로드하고 동적으로 DOM을 생성하니 초기 로딩 속도가 느리지만 이미 다 만들어져 있기 때문에 이후  구동 속도는 빠르고 TTV (Time To View)와 TTI(Time To Interact)의 사이의 간극이 없으며 서버에서 렌더링을 하지 않기 때문에 부하가 적으며 클라이언트에서 연산, 라우팅 등을 처리하여 속도가 빠르고 UX가 우수한 편 대표적으로 SPA 방식에서 많이 사용하는 렌더링 방식

 

Single Page Application (SPA)

하나의 페이지로 이루어진 어플리케이션 새로운 페이지를 불러오지 않고 필요한 부분만 동적으로 변경

 

SPA는 웹 애플리케이션에 필요한 리소스들을 요청 초반에 한 번에 모두 다운로드하고 이후 새로운 갱신 사항이 있을 때 필요한 데이터만 다운로드하여 클라이언트에서 갱신하는 특징 때문에 자연스럽게 CSR 방식으로 렌더를 합니다

 

장점 

• 초기로딩 이후 구동속도 빠름
• 서버에 부하가 적음
• 클라이언트에서 연산, 라우팅을 처리하여 속도가 빠름
• UX 우수한편

단점

• 초기로딩 느림
• SEO 부적합

---

Sever Side Redering (SSR)

서버 사이드 렌더링이란 클라이언트가 요청을 보내면 서버에서 렌더링 후 클라이언트에게 보내는 방식

 

유저가 요청시 서버에서 렌더링을 하여 JS 와 다른 필요한 자원을 보내주고 브라우저에선 JS를 다운 받아 HTML에 연결

 

SSR은 브라우저가 렌더링 준비를 마친 HTML을 받고 JS를 주입하는 방식으로 초기 로딩이 빠르고 SEO에 유리 하지만 동적인 인터렉션을 담당하는 JS파일을 적용하기 전에 TTV (Time To View)와 TTI(Time To Interact)의 사이의 간극이 존재하며 페이지를 이동할 때마다 매번 새로운 렌더링준비를 마친 HTML을 받아야 해서 TTFB (Time To First Byte)가 느리고 서버에 부하가 크다

 

Multi Page Application (MPA)

여러 페이지로 이루어진 애플리케이션이며 새로운 페이지를 요청할 때 서버에서 렌더링 하여 정적 리소스를 전달 

 

MPA는 새로운 요청이 있을 때마다 서버에서 이미 만들어진 페이지를 받습니다 이후 새로운 갱신 사항이 있을 때 서버에서 만들어진 페이지를 다시 받는 특징 때문에 자연스럽게 SSR방식으로 렌더를 합니다

 

장점

• 초기 구동속도 빠름
• SEO 유리

단점

• 화면 깜빡임 
• TTV와 TTI 사이 간극이 있음
• 서버 부하 상승

---

Static Site Generation (SSG)

여러개의 페이지로 이루어진 어플리케이션이며 빌드시 렌더링을 하고 정적 리소스를 전달

 

정적 사이트 생성이란 SSR이랑 비슷하지만 빌드시 모든 파일은 정적으로 생성하여 서버에 업로드하여 클라이언트가 요청하면 정적 파일을 전송하는 방식 모든 유저에게 항상 동일한 화면만 보이기 때문에 한번 생성한 이후에 CDN으로 어딘가 저장한 후에 필요할 때만 로드 (예시 : AWS CloudFront, S3) 

장점

• TTV 빠름
• SEO 유리
• CDN에 캐시 가능

단점

• 데이터가 정적임
• 사용자별 정보 제공 어려움

---

비교

 

	CSR	SSR
장점	초기로딩 이후 구동속도 빠름 TTV 와 TTI 사이 간극 없음 서버 부하 분산	초기 구동 속도 빠름 SEO 유리
단점	초기로딩 속도 느림 SEO 부적합	화면 깜빡임 존재 TTV와 TTI 사이 간극이 있음 서버 부하 상승

---

어떤 방식을 사용해야 될까?

 

프로젝트 목적에 맞게 렌더링을 어떻게 해야 할지 고민하여 선택

 

CSR : 유저랑 상호작용이 많고 고객 데이터를 보호해야 하거나 SEO가 필요 없을 때

SSR : SEO(Search Engine Optimization)가 필요하며 자주 업데이트가 될 때

SSG : SEO(Search Engine Optimization)가 필요하며 누구에게나 동일한 내용이 전달되어야 되고 정적이며 잘 변하지 않는 사이트를 만들 때