SSR/CSR (+ SEO, SPA, TTV, TTI) 웹 렌더링의 발전 순서에 따른

웹 랜더링 방식의 발전 순서

서버에 이미 배포되어있는 html 을 받아와서 그대로 보여줌

페이지 내에서 부분적으로 업데이트 가능해짐

html문서 전체가 아니라 서버에서 json같은 형식으로 데이터만 받아올 수 있게 된다

그 데이터를 받아서 js가 동적으로 html을 생성하여 페이지를 업데이트 하는 방식

위 방식이 정식적인 이름을 달고 등장

웹사이트에서도 사용성 올라감

서버에서 index.html 을 보내주면,

필요한 js를 서버로부터 다운로드 받는다. (어플리케이션 로직 & 소스코드 등 사이즈가 큼)

추가로 필요한 데이터는 js가 동적으로 서버에 요청해서 받아오고,

받아온 데이터를 Js가 동적으로 html 렌더링

장점)

초기 랜더링 이후에는 서버 의존 없이 클라이언트가 혼자 랜더링, 빠른 화면 전환, 인터렉션, ux 가 좋다

서버의 부하 줄어든다

문제점)

1) 사용자가 첫화면을 보기까지 시간이 오래걸린다

2) SEO 좋지 않다

사이트에 접속하면 서버에서 해당 페이지에 필요한 html, css, js, 데이터를 가져와서 페이지를 채우고(index.html) + 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에게 보내줌

클라이언트는 바로 랜더링

장점)

1) 첫페이지 로딩 빨라짐

2) SEO 좋음

문제점)

1) static site에서 발생했던 blinking 이슈가 발생, ux 좋지 않음

2) 서버에 과부하

3) 사용자가 빠르게 웹사이트를 볼 수 있지만, 인터렉션이 없는 경우가 있다 (js가 아직 없어서)

[CSR] TTV=TTI

[SSR] TTV >>> TTI