우아한테크)🎨 신세한탄의 CSR&SSR

https://www.youtube.com/watch?v=YuqB8D6eCKE 

 

[mpa]
-탭을 이동할 때 마다 페이지 전체를 새로 렌더링하는 전통적인 웹페이지 구성방식
-렌더링 방식: 서버에서 이미 랜더링된 정적 리소스를 받아오기 때문에 렌더링 방식으로 ssr을 사용
php나 dsp로 mpa를 만들면 자연스럽게 ssr을 사용


[spa ]
-하나의 페이지로 구성된 웹어플리케이션
ex)사용자의 행동에 맞는 부분만 변경
렌더링방식: 웹어플리케이션에 필요한 정적 리소스를 초반 한번에 모두 다운받아, 새로운 페이지 요청이 있을 때 필요한 데이터만 전달받아 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 랜더링 방식으로 csr을 사용한다.

*이 두 개념은 페이지가 몇 개냐 랜더링을 어디서 하냐에 따라 달라지는 다른 개념

csr- 클라이언트 측에서 렌더링을 하는 방식
ssr 서버 측에서 랜더링을 하는 방식. 

+ssg는 서버에서 html을 보내준다는 측면에서는 ssr과 비슷하지만 언제 만들어주느냐의 차이가있다.

ssr은 요청 시 서버에서 즉시 html을 만들어서 응답하기 때문에 데이터가 달라지거나 자주 바뀌어서 미리 만들어두기 어려운 페이지에 적합하고
ssg는 페이지들을 서버에 미리 모두 만들어 둔 뒤에 요청 시에 해당 페이지를 응답하는 것이기 때문에 바뀔 일이 거의 없어서 캐싱해두면 좋은 페이지에 사용하면 적합

 

[csr ssr의 동작과정과 특징]

csr
유저가 웹사이트에 방문하면 브라우저가 서버에 콘텐츠를 요청하고 서버는 빈 뼈대만 있는 html을 응답으로 보내준다.
브라우저가 연결된 js 링크를 통해 서버로부터 다시 js 파일을 다운로드 받고 js를 이용해 동적으로 페이지를 만들어서 브라우저에 띄워준다.  

 

단점

1. 브라우저가 js 파일을 다운로드 받고 동적으로 돔을 생성하는 시간을 기다려야 하기 때문에 초기 로딩 속도가 느림

2. 브라우저들이 가진 웹 크롤러는 html을 읽어서 검색 가능한 색인을 내는데 csr방식의 html은 텅텅 비어져 있다. 

-> 검색 엔진 최적화에 불리하다

 

장점

1. 초기 로딩 이후에 페이지 일부를 변경할 때는 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동 속도는 빠르다. 2. 서버가 html을 넘겨주는 역할만 수행하면 되기 때문에 서버 측에 부하가 적다.
3. 클라이언트 측에서 연산 라우팅 등을 모두 직접 처리하기 때문에 반응 속도가 빠르고 ux도 우수하다. 

ssr
유저가 웹 사이트에 방문하면 브라우저에서 서버로 콘텐츠를 요청. 서버에서는 즉시 페이지에 필요한 데이터를 얻어와 모두 삽입하고 css까지 모두 적용해서 렌더링 준비를 마친 html과 js 코드를 브라우저에 응답으로 전달한다. 
브라우저에서는 바로 전달받은 페이지를 띄우고 이어 브라우저가 js 코드를 다운로드하고 html의 js 로직을 연결한다. 

 

장점
1. 모든 데이터가 이미 html에 담겨진 채로 브라우저에 전달되기 때문에 검색 엔진 최적화에 유리하다.

2. 자바스크립트 코드를 다운로드받고 실행하기 전에 사용자가 화면을 볼 수 있다
->js 다운로드를 기다려야 했던 csr보다 초기 구동 속도가 빠르다.

 

단점

1.  ptv 타임 투 뷰와 tti 타임 투 인터렉트 간의 시간 간격이 존재한다는 것이 단점이다.

2. 페이지 로딩시마다 서버에 요청하기 때문에 서버에 부하가 있다.

[서비스 성격에 따른 사용방법]
1. 사용자와의 상호작용이 많고 대부분 페이지가 고객의 개인 정보 데이터를 기준으로 구성되는 서비스라면 검색 포털 상위에 노출되는 것보다 오히려 고객의 데이터를 보호하는 것이 더 중요하기 하고 모든 서비스에 검색 노축이 필요하지 않기 때문에 csr적합. 

 

2. 홈페이지이기 때문에 상위 노출되어야 하고 누구에게나 동일한 내용을 노출하고 있다면 그리고 만약 그 페이지 데이터가 자주 바뀐다면 ssr이 더 적합

 

3.내용을 업데이트하는 일이 거의 없다면 ssg가 더 적합.