TTV (Time to View)란?

: 사용자가 웹 브라우저에서 내용을 볼 수 있는 시점을 의미한다.

TTI (Time to Interact)란?

: 사용자가 웹 브라우저에서 내용을 인터랙션을 할 수 있는 시점을 의미한다.

CSR의 TTV와 TTI

1. 사이트에 접속을 한다

2. CSR은 사이트에 접속하게되면 서버에서 index.html 파일은 받아온다. 이 index.html 파일은 텅텅 비어져있기때문에 사용자에게는 아무것도 보여지지 않는다.

3. 그리고 index.html파일의 < script > 태그로 명시되어 있는 JS파일을 요청한다

4. 최종적으로 동적으로 HTML을 생성할 수 있는 어플리케이션 로직과 라이브러리가 담긴 JS파일을 받아오게 된다. 이 순간부터 사이트가 사용자에게 보여지게 되고, 클릭등의 인터랙션도 가능하게된다. (TTV, TTI)

즉 CSR은 TTV와 TTI가 같다

SSR의 TTV와 TTI

1. 사이트에 접속을 한다

2. 서버에서 이미 잘 만들어진 index.html파일을 받아와 사용자가 웹사이트를 볼 수 있다.(TTV)
   하지만 아직 동적으로 제어할 수 있는 JS파일을 받아오지 않았으므로 사용자가 클릭을 아무것도 처리할 수 없다. 반응이 없다.

3. JS파일을 요청한다.

4. JS파일을 받아오게 되면 그때부터 사용자 인터랙션이 가능해진다. (TTI)

즉 SSR은 TTV와 TTI가 다르다.

참고문헌 : 드림코딩