MPA,SPA 부터 CSR, SSR 까지

들어가며

상태 관리에 대해서 알아보기를 결심!.. 어디서부터 이미 먼저 작성된 많은 글들을 둘러보다 보니 음.. 🤨
먼저 알고 있어야 하는 이론이..... 이 부분에 대한 지식이 아주 얕은 상태인 걸 깨달았다.
지금의 나.. 어렴풋이 들어본 CSR과 SSR의 이름만 알고 있을 뿐.. 😓

모르면 찾아보면 되지!! 좋아 그럼 어디부터 알아볼까~ 하고 거슬러 올라가다 보니

먼저 열심히 찾고 읽고 보게 된 지점이 SPA부터 CSR, SSR이라서 정리해 보았다.
SPA는 MPA와 비교되는 방식이라 함께 작성!

 

 

🥊 MPA vs SPA

MPA (Multi Page Application)

여러 페이지로 구성된 웹 애플리케이션. 전통적인 웹 페이지 구성 방식이다.

 

MPA의 렌더링 방식

• 인터랙션이 발생한다. (클릭 같은)
• 서버로부터 새로운 html을 받아와서 해당 링크로 이동한다.
• 페이지 전체를 새로 렌더링 한다.

 

SPA(Single Page Application)

단일 페이지로 되어있는 웹 애플리케이션.
페이지를 렌더링 하기 위한 모든 리소스를 최초 접근 시 한 번만! 다운로드한다.
이후에는 특정 부분만 비동기 형태로 데이터를 바인딩 해서 새로 고치는 방식.

현재 웹 개발의 트렌드! 자바스크립트 프레임워크와 라이브러리들이 SPA의 형식을 갖고 있다.

 

SPA와 SSR을 비교했을 때, SPA은 이런 장점이 있다.

• 배포가 간단하다
• 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.

 

 

🥊 CSR vs SSR

CSR (Client-Side Rendering)

SPA의 렌더링 방식이며, 사용자의 요청에 따라 필요한 부분만 응답을 받아서 렌더링 하는 방식이다.
간단하게 말하자면 렌더링이 클라이언트쪽에서 이루어지는 방식이다.
브라우저가 서버로부터 받아온 응답을 렌더링 하기 때문에 렌더링이 필요한 상태를 정교하게 관리해야 한다.

 

렌더링 순서

• 유저가 사이트에 접속, 브라우저가 화면 로드를 위한 요청을 서버에 보냄
• 서버에서 index 파일(거의 빈 상태)을 받아옴 → 유저는 로딩 중.. 흰 화면..
• 브라우저가 서버로부터 js를 받아옴 → 여전히 로딩 중
• 브라우저가 js를 실행하며 프레임워크를 실행한다.
  • 이때 동적으로 HTML을 생성하고, 필요한 데이터들을 모으고.. 이런 과정들을 거친다.
• 웹사이트가 보이고 (TTV), 클릭 등의 인터랙션이 가능해진다 (TTI)

초기 로딩 이후

• 브라우저가 필요한 부분을 서버에게 요청
• 서버가 필요한 부분과 관련된 리소스만 응답함

 

🤔 TTI랑 TTV는 뭔가요?

• TTI = Time To Interact
  • 사용자가 브라우저에서 인터랙션(클릭 등의 행동)을 할 수 있는 시점
• TTV = Time To View
  • 사용자가 브라우저에서 내용을 볼 수 있는 시점 (흰 화면 아닐 때)

 

CSR의 특징

• SSR에 비해서 초기 로딩시간이 좀 더 오래 걸린다
  • 모든 JS 파일을 받아오기 때문이다.
• 속도가 빠르고 서버 부하가 적다.
  • 초기 로딩 이후에는 서버가 필요한 리소스만 응답하기 때문에 새로고침 없이 수정된 데이터를 바로 볼 수 있다.
• UX 측면에서 SSR보다 사용자 친화적이다.
  • TV와 TTI가 같은 시점이다.
• SEO에 불리하다.

CSR이 SEO가 불리한 이유는 사용자와의 인터랙션 후에 페이지를 로드하기 때문에,
웹 크롤러가 페이지를 색인화하려 할 때 빈 페이지처럼 보일 수 있다. 

 

🤔 SEO는 또 뭔가요?

검색 엔진 최적화. 웹사이트가 검색 결과에 더 잘 노출되도록 최적화하는 과정이다.
검색엔진은 페이지→페이지로 링크를 따라가며 찾은 콘텐츠의 색인을 생성한다.

 

 

 

SSR (Server-Side Rendering)

MPA의 렌더링 방식이며 서버로부터 완전하게 만들어진 html 파일을 받아와서 페이지 전체를 렌더링 하는 방식.

쉽게 말해서 렌더링이 서버 쪽에서 이루어지는 것을 말한다.
어떤 부분만 수정하고 싶을 때, 일부분만 수정할 수 있는 게 아니라 수정한 부분을 포함해서

처음부터 모든 것을 서버로부터 다시 받아온다.
브라우저의 요청과 서버의 응답 시 새로고침 되어 화면이 깜빡인 후에 표시된다.
서버로부터 완전히 만들어진 파일을 받아오니까 브라우저에서는 데이터를 굳이 정교하게 관리하지 않는다.

 

렌더링 순서

• 유저가 사이트에 접속
• 브라우저가 초기화면 로드를 위한 요청을 서버에 보냄
• 서버는 바로 렌더링이 가능한 HTML 파일을 만들어 보냄 (이미 완성된 HTML)
• 브라우저는 서버로부터 받은 HTML 파일을 렌더링 (TTV 하지만 조작 불가능..)
• 브라우저가 서버에서 JS를 받아옴 (여전히 조작 불가능.. 하지만 사용자의 조작을 기억하고 있음)
• 서버에서 JS 실행
• 인터랙션과 사용이 가능해짐 (TTI)

 

초기로딩 이후

• 위 과정에서 1을 제외한 나머지의 반복 .. 모든 것을 다시 서버로부터 받아오기 때문이다.

 

SSR의 특징

• SEO에 유리하다.
  • CSR과 반대로, 서버로부터 온 HTML에 모든 데이터가 담겨서 브라우저에 전달되기 때문이다.
• 초기 로딩 속도가 빠르다.
  • 서버로부터 화면을 렌더링 하기 위한 필수적인 요소를 먼저 가져오기 때문이다.
  • 이것은 단점이기도 한데, 사용자마다 차이가 있지만 TTV와 TTI 사이의 간격이 명백히 존재하기 때문이다.
• UX 측면에서 사용자 친화적인 면은 떨어진다.
  • TTV와 TTI 사이의 간격이 존재하기 때문. (웹페이지는 이미 로딩되었지만 클릭해도 반응이 없는 그런…)
  • 페이지를 요청할 때마다 새로고침이 된다는 점. (흰 화면 깜빡)
• 위와 이어서, 서버의 부하가 증가한다
  • 새로고침 된다는 것은 서버에서 매번 페이지를 구성하는 모든 리소스를 다시 렌더링 하기 때문.

 

 

요약해 보면 이렇게 정리해 볼 수 있겠다.

	CSR	SSR
로딩 속도	초기 로딩은 느리지만 이후에는 빠른 편 (한 페이지에서 필요한 부분만 리소스를 받아오기 때문)	초기 로딩은 빠르다 이후에는 느린 편 (매 페이지마다 새로 리소스를 받아오기 때문)
서버의 부하	낮다	높다
UX	사용자 친화적	사용자 친화적이지 못함
SEO	불리하다	유리하다

 

정리한 걸 보다 보니 왠지 CSR이 더 나은 것 같은 느낌이 들기도 하지만, 어느 쪽이 더 좋다고 할 수는 없다.

서비스나 프로젝트에 따라서 다르기 때문이다. 그럼 언제 뭐가 더 유리할까??

 

CSR	SSR
✨ SEO가 중요하지 않을 때 ✨ 사용자의 상호작용이 중요할 때 ✨ 서버의 성능이 좋지 않을 때 ✨ 데이터 보호가 더 중요할 때	✨ 웹페이지의 최초 로딩이 빨라야할 때 ✨ 검색 노출이 중요해서 SEO가 필요할 때 ✨ 메인 스크립트가 큰 비중을 차지할 때 ✨ 사용자와의 상호작용이 많지 않을 때

 

 

 

지금까지 MPA와 SPA, CSR과 SSR에 대해서 알아보았다.

먼저 일목요연하게 작성된 여러 글들을 읽고 정리해 보며 웹에 대해서 조금 더 이해할 수 있는 시간이었다.

경우에 따라서 더 유리한 쪽으로 활용하는 것이 중요하겠다는 생각이 든다. 🙂

 

 

 

출처

https://thetombomb.com/posts/rendering-options-on-the-web

https://poiemaweb.com/js-spa

SPA, SSG, SSR and JAMStack: a front-end acronyms guide

https://miracleground.tistory.com/165

https://velog.io/@yu2jeong/TTV-Time-To-View-TTI-Time-To-Interact

 

 

 

 

---

🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️

방문해주셔서 감사합니다! 🙌

포스팅들은 공부중인 내용을 글로 작성한 것이라 부족한 점이 많으니 참고 부탁드립니다. 

부족한 부분에 대한 코멘트는 언제나 환영입니다.

좋은 하루 되세요, 감사합니다! 🙂