1. 웹의 역사와 발전
1세대 웹: 전통적인 Web System Architecture 정적 웹.
예) 위키피디아처럼 정보를 제공하는 HTML만 보여지는 웹 페이지
2세대 웹: User Interaction 증가. 동적 웹(자바스크립트)
MPA(Multi Page Application)
3세대 웹: SPA(Single Page Application), 백엔드와 프론트엔드의 구별
SPA
- 브라우저에서 자바스크립트로 화면을 그림
SPA vs MPA
- 가장 큰 차이: 새로고침(깜빡임)
- 모바일이 대세인 최근, 적은 트레픽과 빠른 인터렉션이 중요해 SPA와 잘 맞는다.
2. CSR vs SSR
- 차이점: 가장 첫 요청에 html이 들어있느냐 아니냐!
CRA(Create React App)
아무런 초기 설정 없이도 CRA를 통해 React 기반의 SPA 사이트를 구현할 수 있게 됨
- 단점: CRA로 만든 프로젝트는 검색이 안됌(SEO 문제)
- 이유: CSR(Client Side Render)로 실행되기 때문이다.
SEO(Search Engine Optimize)
웹 클로러가 각 사이트를 돌아다니며 조사를 하고 있는 상황이고, 이를 구글 DB에 반영하여 검색 엔진의 형태로 만듦
CSR이 SEO에 반영이 안되는 이유?
1) index.html(빈 페이지) > javascript(페이지 로드) > react
2) 처음 다운로드 된 페이지가 빈 페이지이기 때문에 검색 노출 안 됌
SSR?
1) index.html(차있는 페이지)
2) 검색 노출이 됨
CSR
출처: The Benefits of Server Side Rendering Over Client Side Rendering
- SSR보다 초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전체적인 페이지 완료 시간은 SSR보다 느려진다.
- app.js 에 모든 내용(react,vue,angular 포함)이 다 있음
- 단점
1) 첫 로딩까지 시간이 오래 걸림
2) HTML이 빈 페이지이기 때문에 SEO가 좋지 않음
SSR
출처: The Benefits of Server Side Rendering Over Client Side Rendering
- 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식
- 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR보다 페이지를 구성하는 속도는 늦어지지만, 전체적으로 사용자에게 보여지는 콘텐츠 구성은 빨라진다는 장점
- SSR을 직접 사용하려면 복잡함 => 생산성을 위해 Next.js를 사용
- 장점
1) 첫 페이지 로딩이 빠름
2) SEO 좋음 - 단점
1) 사용자가 클릭을 하게되면, 전체적인 웹사이트를 받아오는 것이기에 안 좋은 user exprience
2) 서버의 과부화
3) 동적으로 처리하는 자바스크립트 다운로드가 늦기 때문에 반응이 없는 경우가 발생할 수 있음
TTV, TTI
- TTV(Time To View)
- TTI(Time TO Interact)
Next.js
- SSR을 지원하는 라이브러리
1) 첫 페이지를 "/"로 호출하면 SSR로 렌더링 > HTML 파일로 완성
2) 'Link' 컴포넌트를 사용해 라우팅을 하면 CSR이 이뤄짐
CSR vs SSR 정리
- 속도
- 초기 전송되는 데이터(페이지): CSR > SSR
- 사용자들이 보는 페이지: CSR < SSR
- SEO 취약성
- CSR이 SEO에 취약하다.
- 다만, 서비스가 SEO가 필요한 가에 대한 고민이 있어야한다.
(어드민 페이지의 경우 CSR로 만드는 게 나을 수 있다.)
- 비용 문제
- CSR은 트레픽 비용만 지불하게 된다.
- SSR은 매번 서버에서 로직을 실행하는 비용을 추가하게 되어 CSR과 비교해 수백~ 수천배까지 차이가 날 수 있다.
결국, 프로젝트나 서비스 구성에 맞는 방법을 사용해야한다.
참고자료
1. https://tech.weperson.com/wedev/frontend/csr-ssr-spa-mpa-pwa/#pwa-progressive-web-app
2. https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
3. https://www.youtube.com/watch?v=iZ9csAfU5Os
technology blog