SSR(Server Side Rendering) vs CSR(Client Side Rendering)

사내에서 담당하고 있던 React 프로젝트의 개발이 진행될수록 첫 페이지가 나타나기 전의 흰 화면 상태가 점점 더 길어지는 이슈를 처리하게 되었다.

목차

• 웹페이지 구성 방식 MPA VS SPA
• SSR 정의와 장단점
• CSR 정의와 장단점
• 렌더링 방식 선택

 

1. 웹페이지 구성 방식 MPA VS SPA

MPA (Multi Page Application)

• MAP 구성 방식은 이름 그대로 여러 페이지로 구성된 웹 어플리케이션이다.
• SSR 방식을 채택하고 있다.
• 새로운 페이지를 요청할 때마다 서버에서 렌더링이 준비된 정적 리소스(HTML, CSS, JS 등)를 다운 받아 페이지 전체를 새로 렌더링 하는 전통적인 웹페이지 구성 방식이다.

SPA (Single Page Application)

• 이름 그대로 하나의 페이지로 구성된 웹 애플리케이션이다.
• CSR 방식을 채택하고 있다.
• 브라우저에 최초 접속 시 서버로부터 모든 정적 리소스를 다운 받고 이후에는 데이터를 요청할 때만 서버와 통신한다. 현재의 웹 개발 트렌드이다.

 

출처 :  Microsoft 문서

2. SSR 정의와 장단점

Server Side Rendering의 약자
서버에서 렌더링 할 준비가 된 HTML 파일을 받아와 페이지 전체를 렌더링 하는 방식

렌더링 준비가 됐다는 말은 서버에서 브라우저에 표시될 페이지를 미리 그려뒀다고 생각하면 될 것 같다.

SSR의 단계

출처 : The Benefits of Server Side Rendering Over Client Side Rendering

1. 사용자가 웹 페이지를 요청하면, 서버에서 '렌더링 준비가 된 HTML'을 브라우저에 응답한다.
2. 브라우저에 전달받자마자 렌더링 준비가 되었던 HTML은 즉시 실행이 되고, 사용자는 화면을 볼 수 있다. 아직 JS 파일은 다운로드 중이기 때문에 사용자 조작이 불가능하다.
3. JS 파일의 다운로드가 끝나면 브라우저가 JS코드를 실행한다.
4. 웹 페이지는 상호작용이 가능해진다.

위에서 알아본 SSR 방식의 특징

• 서버 호출 시 해당하는 HTML 파일을 클라이언트에 넘겨주기 때문에 전체 페이지가 렌더링 된다.
• 서버에서 HTML 파일을 이미 렌더링이 가능한 상태로 넘겨주기 때문에 JS 파일이 다운로드 중에도 사용자는 출력된 화면을 보고 있을 수 있음 즉, 흰 화면이 아님

SSR의 장점

• 초기 렌더링이 빠르다 즉, 사용자가 기다리는 시간이 적다.
• SEO 대응에 용이하다.

SEO (Search Engine Optimization) 검색 엔진 최적화

SEO는 웹 페이지 검색엔진이 자료를 수집하고 검색 결과의 상위에 노출될 수 있게 해주는 과정을 말한다.

대부분의 검색엔진 크롤러 봇들은 JS를 실행시키지 못하고 HTML에서 컨텐츠를 수집하기 때문에 서버에서 렌더링 된 HTML 파일을 보내주는 SSR이 SEO에 용이하다.

CSR은 자바스크립트 파일이 다운 받아지고 실행되고 나서야 HTML이 생성된다. 그래서 크롤러들은 CSR로 만들어진 페이지를 빈 페이지로 인식한다.

SSR의 단점

• 서버 호출 시 페이지가 새로고침 되며 깜빡임 발생
• 요청이 생길 때마다 서버에서 렌더링 되지 않아도 될 부분까지 준비하기 때문에 서버 부하의 원인이 된다.

3. CSR 정의와 장단점

 

Client Side Rendering의 약자
클라이언트에서 웹 페이지를 렌더링 하는 방식

 

CSR의 단계

출처 : The Benefits of Server Side Rendering Over Client Side Rendering

1. 브라우저는 서버로부터 내용이 비어 있는 HTML 파일을(index.html) 받게 된다. 이 HTML 파일에는 script, meta, link 태그 등이 있다.
2. 브라우저는 번들링 된 JS 파일을 다운 받아야 하기 때문에 로딩이 오래 걸린다. 아직 DOM의 내용이 비어 있기 때문에 빈 페이지가 출력된다.
3. JS 코드가 실행되고 동적 컨텐츠가 그려지기 전까지 빈 페이지가 출력된다.
4. JS 코드가 실행되면 사용자는 화면을 볼 수 있고 상호작용을 할 수 있다.

CSR의 장점

• 클라이언트에서 렌더링 하기 때문에 서버 부하 감소
• 서버 요청 시 서버는 요청한 데이터를(JSON) 응답하기 때문에 변경된 부분만 렌더링 할 수 있어 사용자 친화적이다.

CSR의 단점

• 브라우저 최초 진입 시 모든 정적 리소스를 다운로드하기 때문에 SSR 보다 초기 로딩 속도가 느리다.
• SEO에 용이하지 않다. 고 하는데 요즘은 google, naver 등 CSR도 지원된다고 한다. 궁금하면 이 블로그의 글을 읽어보면 도움이 될 것 같다. 

4. 렌더링 방식 선택

SSR

• MPA 구성 방식을 사용할 때
• 최초 로딩이 빨라야 하는 서비스일 때
• 웹 사이트에 사용자 상호작용이 많지 않을 때
• SEO가 필요할 때

CSR

• SPA 구성 방식을 사용할 때
• 서버 성능이 좋지 않을 때
• 웹 사이트에 사용자 상호작용이 많을 때
• SEO가 필요하지 않을 때

 

MPA, SPA (결과물) / SSR, CSR (렌더링 방법)으로 나누어 생각하면 좋을 것 같다.