SPA, CSR , SSR, TTI, TTV

아현·2021년 8월 12일
0

Web

목록 보기
2/10



SPA (single-page application)

출처


  • 싱글 페이지 애플리케이션(single-page application, SPA, 스파)

    • 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트
  • SPA에서 HTML, 자바스크립트, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다.



CSR (Client Side Rendering)

출처


  • 클라이언트 사이드 렌더링은 SPA로, 클라이언트 사이드에서 HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행하는 것

  • 점점 더 복잡해지는 웹페이지를 구현하기 위해서 전통적인 방식의 SSR보다는 CSR로 웹을 구현하는 경우가 많다.

  • 동작과정

    • HTML 다운로드-> JS 다운로드 -> JS 실행 -> DATA 서버로부터 받기 -> Content 확인가능
  • CSR의 장점

    • 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기때문에 SSR 보다 조금 더 빠른 인터랙션이 가능

    • page 전체를 요청하지 않고 페이지에 필요한 부분만 변경하게 하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능

    • lazy loading을 지원

      lazy loading: 페이지 로딩 시 중요하지 않은 리소스의 로딩을 늦추는 기술
      (Ex. 스크롤 내려야만 해당 이미지 보이게 하는 것)

    • 서버사이드 렌더링이 따로 필요하지 않기때문에 일관성있는 코드를 작성할 수 있음

  • CSR의 단점

    • Googlebot과 Searchconsole에 검색 노출이 되지 않음 (브라우저가 없기때문에, html만 가져와서 검색에는 뜨지 않음)
      페이지를 읽고, 자바스크립트를 읽은 후 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기구동 속도가 느림



SSR (Server Side Rendering)


  • 서버에서 렌더링을 작업하는 렌더링 방식

  • 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 html, js 파일 등을 전부 다운로드해서 화면에 렌더링하는 방식

  • SSR의 장점

    • 사용자가 처음으로 컨텐츠를 볼 수 있는 시점을 앞당길 수 있다

    • 검색 엔진 최적화(SEO) 적용이 용이

  • SSR의 단점

    • 모든 요청에 관해 필요한 부분만 수정하는 것이 아닌, 완전히 새페이지를 로딩하고 렌더링한다.(새로고침)

    • 전체를 로딩하다보니 CSR보다 느리고, bandwidth를 많이 쓰고, 사용자 경험 좋지 않다.

      • 사용자가 처음으로 컨텐츠를 볼 수는 있으나, 화면단에는 html요소들이 나오지만 js파일이 다 다운로드 되지않아서 버튼이 클릭되지않는 등의 현상이 있을 수 있다.





TTI (Time To Interactive), TTV (Time To View)


  • TTI (Time To Interactive)

    • 사용자가 웹브라우저에서 인터랙션 할 수 있는 시점

    • 상호 작용을 평가할 수 있는 메트릭

    • 사용자 경험과 밀접하게 연결되어 있으며 웹 성능을 모니터링할 때 반드시 고려해야 합니다.

      • the page displays useful content (determined by the First Contentful Paint)
      • the most visible elements on the page are interactive (when they are clickable or respond to a mouse-over, etc.)
      • the page responds to user interactions within a maximum time of 50 milliseconds.
        출처
    • 페이지 렌더링을 차단할 수 있는 JavaScript 스크립트의 직접적인 영향을 받습니다.

      • 스크립트가 많을수록 TTI에 대한 지연이 커집니다.

      • 스크립트 성능이 장치마다 상당히 다르기 때문에 이는 영향 측면에서 장치마다 다를 수 있습니다. 프로세서가 느릴수록 스크립트를 분석하고 컴파일하는 데 더 많은 시간이 소요됩니다.

  • TTV (Time To View)

    • 사용자가 웹브라우저에서 내용을 볼 수 있는 시점
profile
For the sake of someone who studies computer science

0개의 댓글