참고자료 : [10분 테코톡] 🎨 신세한탄의 CSR&SSR
SPA와 MPA
SPA(Single Page Application)
- 하나의 html로 구성된 웹 애플리케이션이다.
- SPA는 웹 애플리케이션에 필요한 정적 리소스를 처음 한 번에 모두 다운받고 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달받아서 클라이언트에서 페이지를 갱신함.
MPA(Multi Page Application)
- 탭 이동 시 서버로부터 새로운 html을 받아와 페지이를 다시 렌더링
- MPA는 페이지 요청이 있을 때마다 서버에서 이미 렌더링된 정적 리소스를 받아옴.
일반적으로 MPA의 렌더링 방식으로 SSR, SPA의 렌더링 방식으로 CSR을 채용함.
CSR(Client Side Rendering)
: 클라이언트 측에서 렌더링
특징
- JS가 동적으로 DOM을 생성하기 때문에 HTML은 JS와 연결된 상태임. TTV/TTI가 동일함
동작 과정
- 유저의 웹사이트 방문
- 브라우저는 서버에 콘텐츠 요청
- 서버는 브라우저에게 뼈대만 있는 HTML을 응답으로 보내줌
- 뼈대만 있는 HTML을 응답하면돼서 서버의 부하가 적음
- 이외로 클라이언트 측에서 연산, 라우팅을 모두 직접 처리하기 때문에, 반응 속도가 빠르고 UX도 우수함.
- 브라우저들이 가지는 웹 크롤러는 HTML을 읽어서 검색 가능한 색인을 만들어냄.웹 크롤러 입장에서의 뼈대 HTML은 내용이 비어있기 때문에, 검색 엔진 최적화에 불리함.
- 브라우저는 연결된 JS링크를 통해 서버로부터 다시 JS파일을 다운받고, JS를 이용해 동적으로 페이지를 만들어서 브라우저에 띄움
- CSR은 브라우저가 JS파일을 다운로드 받고 동적으로 DOM을 생성하는 시간을 기다려야 하기 때문에 초기 로딩 속도가 느림.
- 초기 로딩 이후에 페이지 일부를 변경할 때는 서버에 해당 데이터만 요청하면 돼서 이후의 구동 속도는 빠름.
SSR(Static Site Generation) = Static Rendering
특징
- 페이지들을 서버에 모두 만들어둔 뒤에 요청 시에 해당 페이지를 응답하기 때문에 바뀔 일이 없어 캐싱해두면 좋은 페이지에 사용하면 적합함
- TTV(Time To View) / TTI(Time To Interact) 사이의 간격이 존재함.
동작 과정
- 웹사이트 방문
- 브라우저는 서버에 콘텐츠 요청
- 서버는 즉시 페이지에 필요한 데이터를 얻어와 모두 삽입하고 CSS까지 적용해서 렌더링 준비를 마친 HTML,JS코드를 브라우저에 응답으로 전달함.
- 모든 데이터가 HTML에 담겨진 채로 브라우저에 전달되기 때문에 검색엔진 최적화에 유리함.
- 브라우저는 전달 받은 페이지를 렌더링함 브라우저는 JS코드를 다운로드하고, HTML과 연결함
- JS 코드를 다운받고 실행하기 전에 유저가 화면을 볼 수 있음.
- JS 다운을 기다려야 하는 CSR보다 초기 구동속도가 빠르지만, 이 과정에서 사용자가 버튼을 클릭하거나 이동하려고 해도 반응할 수 없음. HTML과 CSS만 있는 상태로 JS가 실행되고 JS코드가 모두 연결되기 전까지 사용자의 입력에 응답할 수 없음.
SSG(Static Site Generation) = Static Rendering
특징
- 페이지들을 서버에 모두 만들어둔 뒤에 요청 시에 해당 페이지를 응답하기 때문에 바뀔 일이 없어 캐싱해두면 좋은 페이지에 사용하면 적합함
CSR/SSR 장단점 요약
CSR 장점
- 화면 깜빡임 없음
- 초기 로딩 이후 구동 속도가 빠름
- TTV/TTI 간극 X
- 서버 부하 분산
CSR 단점
- 초기 로딩 속도 느림
- SEO에 불리함
SSR 장점
- 초기 구동 속도 빠름
- SEO 유리힘
SSR 단점
- 화면 깜빡임 있음
- TTV/TTI 간극이 있음
- 매 페이지 로딩시에마다 서버에 요청하기 때문에 서버 부하가 있음
CSR/SSR 단점 보완
CSR
초기 로딩 속도 보완
- code splitting, chunk 분리, tree-shaking 등 js 번들의 크기를 줄여서 초기 DOM 생성 속도 개선할 수 있음
SEO 개선
- pre-rendering을 통해 개선 가능. 라이브러리, 웹 플러그인을 통해 각 페이지에 대한 html 파일을 미리 생성해 둔 뒤 크롤러에게 사전에 렌더링 된 html 버전 페이지를 보여주는 방식 적용
* CSR을 사용하는 SPA에 SSR을 도입하는 것도 좋은 방법
CSR에 SSR 도입
- 가장 간단한 방법으로 프레임워크을 사용할 수 있음
Next.js (react)
- 페이지의 성격 별로 ssr을 사용할 것인지 ssg를 사용할 것인지 밀 정하는 것도 가능
GatsbyJs (react)
- SSG에 최적화된 리액트 기반 정적 페이지 생성 프레임워크. 다양한 플러그인을 제공하는 것이 장점.
Isomorphic App, Universal Rendering
: 초기 렌더링 방식으로 SSR을 사용하고 이후에는 CSR을 사용하는 앱이나 렌더링 방식을 부르는 용어
특징과 장단점
- 서버와 클라이언트가 동일한 코드로 동작함(에러가 발생할 가능성)
- 초기로딩속도, SEO 해결하면서 CSR의 장점을 가짐.
서비스에 성격에 따른 렌더링 방식
CSR
- 사용자와의 상호작용이 많고 페이지의 대부분이 고객의 개인정보 데이터를 기준으로 구성된다면 SEO 노출보다 데이터 보호가 우선시 됨.
SSR
- 회사 홈페이지로 상위에 노출되어야 하고, 누구에게나 동일한 내용을 노출하고 있으며 페이지의 데이터 변경이 잦다면 SSR이 적합함.
프론트엔드 개발자