JavaScript | MPA와 SPA & SSR과 CSR

MPA와 SPA

MPA

• multi page application 의 약자
• 여러 페이지(HTML파일)로 구성된 웹 어플리케이션
• 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html 을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식

SPA

• Single Page Application의 약자
• 하나의 페이지(HTML파일)로 구성된 웹 어플리케이션
• 브라우저에 최초에 한 번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식
• 단인 페이지 어플리케이션(SPA)는 현재 웹개발 트렌드
• react/vue, 앵귤러와 같은 자바스크립트 프레임워크 등이 SPA 방식

 

 

SSR과 CSR

- SSR은 새로운 파일을 불러오지만, CSR은 json 파일의 데이터만 받아오게 된다.

 

SSR(Server Side Rendering)

• Multi page application 은 SSR 방식 채택
• 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html 파일을 받아와 페이지 전체를 렌더링하는 방식
• 과정
  • 먼저 클라이언트가 초기 화면을 로드하기 위해 서버에 요청을 보냄
  • 그럼 서버는 화면에 표시하는데 필요한 데이터를 얻어와 모두 삽입하고 css까지 모두 적용해서 렌더링 준비를 마친 html과 js 코드를 브라우저에 응답으로 전달
  • 브라우저에서는 바로 전달 받은 페이지를 띄움
  • 이어, 브라우저가 js코드를 다운로드하고 html 실행
• 단점
  • 페이지에서 하나만 변경해도 서버 html로 화면에 표시하는 데 필요한 완전한 리소스로 응답함
  • 따라서 요청을 보내고 응답을 받으면 새로고침되어 화면이 깜빡인 후에 표시
  • TTV(Time TO View)와 TTI(Time To Interact)간의 시간 간격이 존재
    • 빈 껍데기 웹페이지가 되어 사용자가 버튼을 클릭하거나 이동하려고 해도 아무런 반응이 없을 수도 있음
  • 페이지를 구성하는 모든 리소스를 준비해서 응답하므로 서버측 부하가 증가
• 장점
  • 모든 데이터가 이미 html에 담겨져 브라우저에 전달되기 때문에 검색엔진 최적화에 유리
  • 서버로부터 화면을 렌더하기 위한 필수적인 요소를 먼저 가져오기 때문에 빠른 초기 로딩

 

CSR(Client Side Rendering)

• 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식(페이지를 새로 로드하는 것 아님)
• 과정
  • 먼저 클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보냄
  • 그럼 서버는 화면에 표시하는 데 필요한 완전한 리소스의 응답
  • 모든 js파일을 다운받아야 하기 떄문에 초기로딩 시간이 더 오래 걸림
• 장점
  • 변경된 부분만 관련된 데이터를 가져와서 빠른 속도
  • 변경된 부분만 요청하여 서버 부담을 줄임
  • 클릭 같은 인터랙션으로 인한 다음 단계로 전환하는 과정에서 링크가 없어 깜빡임 없이 부드러운 사용자 경험
• 단점
  • 웹크롤러가 페이지 색인화 하려고 하면 내용이 빈 페이지처럼 보여 seo에 불리
  • 초기에 모든 js 파일을 다운받아 와야 하기 때문에 초기 로딩 속도가 느리다.

 

 

 

TTV 와 TTI

- 웹사이트 성능 분석 시 TTV 와 TTI도 중요한 요소로 사용

 

- CSR은 TTV = TTI

CSR은 사용자가 웹사이트를 볼 수 있음과 동시에 사용자가 인터랙션이 가능하다.

그래서 최종적으로 번들링해서 사용자에게 보내주는 JS파일을 어떻게 하면 효율적으로 분할할 수 있을지, 

어떻게 하면 사용자가 첫 페이지를 보기 위해 필수적으로 필요한 것만 보낼 수 있을지 고민해봐야 한다.

 

- SSR은 TTV ≠ TTI

SSR은 사용자가 웹사이트를 볼 수 있는 시기와 인터랙션이 가능한 시기의 공백기간이 존재

그래서 시간 단차를 줄이기 위한 방법을 고민하고,

어떻게 더 매끄러운 UIUX를 제공할 수 있을지 고민해봐야 한다.

 

TTV

• Time To View
• 사용자가 웹사이트를 보는데까지 걸리는 시간

 

TTI

• Time To Interaction
• 사용자가 클릭하거나 인터랙션이 가능하게 되는데 걸리는 시간

 

 

 

 

 

 

 

📌참고글

https://miracleground.tistory.com/165

https://velog.io/@wiostz98kr/SSR-CSR-SSG-TTV-TTI-개념-정리

https://callmedevmomo.medium.com/웹-렌더링의-2-가지-접근-csr-ssr-부수기-ba9e2b9c0d6b