Home Study | SSR, CSR, SSG
Post
Cancel

Study | SSR, CSR, SSG

SSR, CSR, SSG

목차

  1. SSR(Server Side Rendering)
  2. CSR(Client Side Rendering)
  3. SSG(Static Site Generator)


시작하기 전에 !
SSR, CSR, SSG는 모두 렌더링하는 방식

1. SSR(Server Side Rendering)

: 서버의 HTML로 렌더링하는 방식(브라우저에서 응답을 받기 전에 데이터 패칭 및 템플릿 작성이 처리되므로 클라이언트에서 위 행위에 대 추가 왕복이 발생하지 않음)

  • 서버에서 렌더링을 마치고, 완전하게 만들어진 HTML 파일을 브라우저로 전달한 후 렌더링하는 방식
  • Tomcat의 Servelt나 Node.js의 Express를 통해 제공
  • 대규모 비즈니스 서비스

1. SSR 동작 방식

출처 : https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

SSR

  1. 사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML 컨텐츠를 컴파일 및 준비한
  2. 컴파일된 HTML은 추가 렌더링 및 표시를 위해 클라이언트 브라우저로 전송됨(response)
  3. 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 함
  4. 브라우저는 자바스크립트를 다운로드하고 실행하면서 페이지를 대화형(interactive)으로 만듬
  5. 사용자가 페이지를 이동할 경우, 위 동작을 반복

2. SSR 장점

  • 비교적 작은 번들링 바일로 인한 빠른 초기 렌더링 시간
  • SEO 친화적
  • 사용자 디바이스에 상관없이 비교적 일정한 퍼포먼스를 제공

3. SSR 단점

  • Serverless 서비스 불가능
  • UX가 다소 떨어짐
  • 페이지 이동시 지속적으로 서버의 부담 발생

2. CSR(Client Side Rendering)

: 클라이언트(브라우저)에서 웹 페이지를 렌더링하는 것(모든 로직, 데이터 가져오기, 템플릿, 라우팅은 서버가 아닌 모두 클리이언트에서 처리됨)

  • 전통적인 방식으로는 SPA가 사용하는 렌더링 방식
  • 최초 로딩 시 브라우저가 서버에 HTML을 비롯한 CSS, JavaScript 등 각종 리소스들을 받아오는 방식
  • 소규모 프로젝트에 주로 사용

1. CSR 동작 방식

출처 : https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

CSR

  1. 사용자가 웹 페이지를 방문하면(request), 브라우저는 최소한의 HTML 파일을 다운로드(response) 함 ← 빈 컨텐츠의 index.html
  2. 브라우저는 index.html에 있는 자바스크립트 번들 파일을 다운로드한 다음 AJAX를 통해 API 요청을 수행하여 동적 컨텐츠를 가져오고 파싱하여 최종 컨텐츠를 렌더링함
  3. 사용자가 페이지를 이동할 경우, 서버에 추가 HTML파일을 요청하지 않고 이미 받은 자바스크립트를 이용하여 렌더링함

2. CSR 장점

  • 매우 적은 서버의 부담
  • 빠르고 자연스러운 페이지 렌더링

3. CSR 단점

  • 비교적 큰 번들링 파일로 인한 초기 렌더링 지연
  • 취약한 SEO
  • 사용자 디바이스의 퍼포먼스에 영향을 받기 쉬움

3. SSG(Static Site Generator)

: 서버로부터 빌드 타임시점에 완성된 HTML을 받아와 렌더링하는 방식

  • SSG의 Static은 HTML이 정적이라는 뜻
  • Next.js에서 권장하는 렌더링 방식
  • 컨텐츠가 비교적 정적인 서비스(블로그 등)

1. SSG 동작 방식

출처 : https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

CSR

  1. 사용자가 웹 페이지를 방문하면(request), 엣지 캐싱(edge caching)된 HTML 클라이언트로 반환해 줌
  2. 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 함

* 엣지 캐싱(edge cashing) : 최종 사용자에게 더 가까운 컨텐츠를 저장하기 위해 캐싱 서버를 사용하는 것

2. SSG 장점

  • CSR, SSR의 장점 소화 가능
  • SEO 친화적

3. SSG 단점

  • 빌드 작업의 높은 중요도






출처

CSR vs SSR vs SSG
렌더링 삼형제 CSR, SSR, SSG
SSR과 CSR의 차이

This post is licensed under CC BY 4.0 by the author.