<Web> CSR vs SSR / SPA vs MAP

1. CSR (Client Side Rendering)

정의

• 렌더링이 클라이언트 쪽에서 일어나며, 서버는 요청을 받으면 클라이언트에 html, js를 보내주고 클라이언트는 그것을 받아 렌더링을 시작

과정

• User가 Website 요청을 보냄
• *CDN이 html, js로 접근할 수 있는 링크를 클라이언트에게 보냄
• 클라이언트는 html, js를 다운받음 (이때 유저는 아무 것도 볼 수 없다)
• 다운 완료된 js가 실행되고, 데이터를 위한 API가 호출
• API로부터 다운 받아온 data를 placeholder 자리에 넣어주고, 이제 페이지는 상호작용이 가능

*CDN

엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식

장단점

• 새로고침이 발생하지 않기 때문에 네이티브 앱(흔히 말하는 애플리케이션)과 같은 경험을 할 수 있음
• 필요한 데이터만 받기 때문에 트래픽이 감소함
• 검색 엔진 크롤러가 데이터 수집에 어려움이 있을 가능성이 존재함

사용

• 네트워크가 빠르거나 서버의 성능이 좋지 않을 때
• 사용자에게 보여주어야 하는 데이터 양이 많을 때
• 웹 어플리케이션에 사용자와 상호작용할 것이 많을 때

2. SSR (Server Side Rendering)

정의

• 말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식

과정

• User가 Website 요청을 보낸다
• Server는 Ready to Render. 즉, 즉시 렌더링 가능한 html 파일을 만듦
• 클라이언트에게 전달되는 순간, 이미 렌더링이 되어 있기 때문에 html은 즉시 렌더링이 된다 (하지만 js가 읽기 전이라 사이트 조작은 불가능한 상태)
• 클라이언트가 js를 다운 받음
• 다운 받아지고 있는 사이에 컨텐츠를 볼 수는 있지만 조작할 수는 없다
• 브라우저가 js 프레임워크를 실행
• js 까지 성공적으로 컴파일이 되면 기억하고 있던 사용자 조작이 실행되고, 웹 페이지는 상호작용을 한다

장단점

• 검색 엔진 최적화 (SEO): js가 도착하기 전에 완성된 형태의 템플릿(html에 데이터가 삽입된 상태)을 서버로부터 전달받기 때문에, 검색 로봇이 페이지를 크롤링하기에 매우 적합
• 초기로딩 성능 개선 : 첫 렌더링된 html을 클라이언트에서 전달해주기 때문에 초기로딩속도를 많이 줄여줌
• 프로젝트 복잡, 성능 악화 가능성

사용

• 네트워크가 느릴 때
• 최초 로딩이 빨라야하는 사이트를 개발할 때
• 웹 사이트가 상호작용이 별로 없을 때

3. CSR vs SSR

웹 페이지 로딩 시간

• 웹 페이지 로딩 시간은 웹 사이트의 가장 첫 페이지를 로딩하는 것, 나머지를 로딩하는 것으로 나눌 수 있다
• 첫 페이지 로딩 시간에서 CSR의 경우 html, css와 모든 스크립트를 한 번에 불러오고, SSR은 필요한 부분의 html과 스크립트만 불러오기 때문에 평균적으로 SSR이 더 빠르다
• 나머지 로딩 시간은, 첫 페이지를 로딩한 후, CSR은 이미 첫 페이지를 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다. 하지만 SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행해서 느림

SEO 대응

• 검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트를 읽음
• CSR은 js를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 js가 실행되어야 metadata가 바뀜
• SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤링에 대응하기 용이하다
  (구글 검색엔진은 자바스크립트 엔진이 내장되어있지만, 네이버나 다음 등 검색엔진은 크롤링에 어려움이 있어 SSR을 따로 구현해야하는 번거로움 존재)

서버 자원 사용

• SSR은 매번 서버에 요청을 하기 때문에 자원을 더 많이 사용

4. SPA (Single Page Application)

정의 & 설명

• 한 개의 page로 구성된 application
• SPA는 CSR방식으로 렌더링 한다 (하지만 모든 방식이 CSR인 것은 아님)
• 단 한 번만 리소스 (html, css, js)를 로딩하고 그 후에는 데이터를 받아올 때만 서버와 통신을 함
• 즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여주는 방식

장단점

• 전체 페이지를 업데이트 할 필요가 없기 때문에 자연스러운 사용자 경험 제공
• 서버에게 정적 리소스를 한 번만 요청하고 받은 데이터는 모두 저장해놓는다
• 서버의 템플릿 연산을 클라이언트로 분산
• js파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느림
• SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리하지만 CSR 방식에서는 클라이언트측의 쿠키 말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않음

5. MAP (Multiple Page Application)

정의 & 설명

• 여러 개의 page로 구성된 Application
• MPA는 SSR방식으로 렌더링되고 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스가 다운된다
• 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링 한다

장단점

• SEO관점에서 유리 → 완성된 형태와 html 파일을 서버로부터 전달받기 때문에 검색엔진이 크롤링하기에 적합
• 첫 로딩이 매우 짧음
• 매 페이지 요청마다 리로딩이 발생하기 때문에 (새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링) 새로운 페이지를 이동하면 '깜빡'임 → 불필요한 템플릿도 중복해서 로딩, 서버 렌더링에 따른 부하 발생

6. SPA vs MAP

• 기술적으로는 SPA는 어떤 페이지를 접속하더라도 html, css, js 동일한 파일 하나만 접속한 페이지에 맞게 화면을 구성하고, MPA는 페이지 별로 해당 페이지에 맞는 html, css, js 파일을 받아서 화면을 구성함
• 일반적으로 SPA + CSR , MPA + SSR 이 사용된다. 예를 들어 React, Vue, Angular같은 JS 기반 프레임워크를 사용하게 되면 기본적으로 html, css, js파일이 하나씩 오기 때문에 자연스레 SPA가 되면서 CSR이 되는 것
• 통계적으로 PC보다는 모바일에서 웹과 앱의 사용이 증가하고 있는데, 모바일의 경우 적은 트레픽과 빠른 인터렉션이 중요해지기 때문에 SPA가 부상

Reference

• https://proglish.tistory.com/216
• https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/
• https://gyoogle.dev/blog/web-knowledge/CSR%20&%20SSR.html
• https://tech.weperson.com/wedev/frontend/csr-ssr-spa-mpa-pwa/#csr-vs-ssr-%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%85%E1%85%B5