Jamkris
🌙
💡 Develop

TTV와 TTI란?

date
May 23, 2024
slug
TTV와 TTI란
author
status
Public
tags
Knowledge
summary
TTV와 TTI에 대해 알아보자
type
Post
thumbnail
category
💡 Develop
updatedAt
May 23, 2024 03:41 AM

TTV & TTI

TTV

  • Time To View
  • 사용자가 웹브라우저에서 내용을 볼 수 있는 시점

TTI

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

CSR 타임라인

  • TTV와 TTI가 같음
      • notion image
  • 순서
  1. 사이트 접속
  1. 서버에서 index파일(텅텅 비어있음) 받아옴 -> 사용자 아무것도 안보임
  1. index에 링크된 모든 로직이 있는 자바스크립트를 서버로 부터 받아옴
  1. 동적으로 html생성 및 js를 통해 빈 html에 웹을 그려냄
  1. 이 순간부터 웹사이트 보이게 되고 클릭이 가능해짐 -> TTV TTI가 동시에 가능해짐

SSR 타임라인

  • TTV와 TTI의 공백이 발생 (꽤 김)
      • notion image
  • 순서
  1. 사이트에 접속
  1. 서버에서 이미 잘 만들어진 인덱스 파일 받아옴 -> TTV가 가능해짐(클릭해도 아무동작하지 않음)
  1. 서버에서 자바스크립트를 받아옴
  1. 사용자 클릭 처리 가능 -> TTI가 가능해짐
 

주의할 점

CSR 사용한다면
최종적으로 번들링해서 사용자에게 보내주는 js파일을 어떻게 효율적으로 많이 분할해서 첫번째로 사용자가 보기 위해 필요한 필수적인 것만 보낼 수 있을지 고민해보아야한다.
SSR 사용한다면
사용자가 보고 인터랙션 하는 시간차 줄이기 위해 어떤 노력할지 고민해보기
어떻게 매끄럽게 UX/UI 제공할 수 있을지 고민

SSG Static Site Generation

  • React같은 경우는 CSR 특화

Gatsby

  • Gatsby같이 사용하면 정적으로 미리 생성해두어서 서버에 미리 배포 가능
  • 모두 정적이진 않지만 추가적으로 데이터 받아오거나 동적으로 처리하는 로직이 있다면 js함께 가지고 있을 수 있어서 동적인 요소 추가 가능

SSR

nextJS

  • 강력한 SSR지원하는 라이브러리
  • Static Generation
  • CSR SSR 적절히 섞어서 사용하도록 지원함