SSR, CSR, SSG
목차
- SSR(Server Side Rendering)
- CSR(Client Side Rendering)
- 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
- 사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML 컨텐츠를 컴파일 및 준비한
- 컴파일된 HTML은 추가 렌더링 및 표시를 위해 클라이언트 브라우저로 전송됨(response)
- 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 함
- 브라우저는 자바스크립트를 다운로드하고 실행하면서 페이지를 대화형(interactive)으로 만듬
- 사용자가 페이지를 이동할 경우, 위 동작을 반복
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
- 사용자가 웹 페이지를 방문하면(request), 브라우저는 최소한의 HTML 파일을 다운로드(response) 함 ← 빈 컨텐츠의 index.html
- 브라우저는 index.html에 있는 자바스크립트 번들 파일을 다운로드한 다음 AJAX를 통해 API 요청을 수행하여 동적 컨텐츠를 가져오고 파싱하여 최종 컨텐츠를 렌더링함
- 사용자가 페이지를 이동할 경우, 서버에 추가 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
- 사용자가 웹 페이지를 방문하면(request), 엣지 캐싱(edge caching)된 HTML 클라이언트로 반환해 줌
- 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 함
* 엣지 캐싱(edge cashing) : 최종 사용자에게 더 가까운 컨텐츠를 저장하기 위해 캐싱 서버를 사용하는 것
2. SSG 장점
- CSR, SSR의 장점 소화 가능
- SEO 친화적
3. SSG 단점
- 빌드 작업의 높은 중요도
출처