.png)
Introduce
본 문서는 2022년 4월 4일 에 작성되었습니다.
React 에서부터 Svelte 에 이르기까지,
웹 서비스의 전반에서 들은 Rendering 과 관련하여,
다음과 같은 이론들을 정리해보는 시간을 가지고자 합니다.
Index
- History
- Frontend Architecture
History
- Static Web
- <iframe>
- XMLHttpRequest
Static Web
최초의 웹 서비스는 Server 에서 랜더링이 끝난 HTML 문서를 완성해놓고 이를 보내주는 방식이었습니다.
<iframe>
iframe 태그의 등장과 동시에, 하나의 HTML 문서 안에 다른 HTML 문서를 담을 수 있게 되었습니다.
XMLHttpRequest
fetch API 의 조상격인...
XMLHttpRequest 의 등장과 동시에,
정보형 포맷(XML, JSON) 등을 받을 수 있게 되었습니다.
AJAX (2005)
H3 에서 언급한 방식이...
AJAX 라는 이름으로 체계화 되었습니다.
이러한 기술로 Thoery - SPA 의 개념이 나오게 되었습니다.
CSR
Node.JS 출시와...
사용자 컴퓨터 성능의 향상 등으로 CSR 이 가능해졌습니다.
자세한 내용은 Thoery - CSR 의 개념을 참고해주세요.
After...
SSR to SSG
Thoery
Static Web
서버가 HTML, CSS, JS 를 완성된 성태로 준비, 전송하는 것입니다.
SPA
AJAX, Virtual DOM 등으로...
새로고침이 없이 다양한 정보만 받아와서 업데이트하는 것입니다.
CSR
서버는 index.html 만 보내고
유저가 모든 DOM 트리 및 구조를 업데이트 하는 것입니다.
<!-- index.html -->
<html>
<head>
</head>
<body>
<!-- main 을 찾아서 랜더링이 이루어짐 -->
<div id='main' ><div>
</body>
</html>- 오랜 초기 로딩 시간
- 낮은 수준의 검색 엔진 최적화 (SEO)
SSR
서버에서 랜더링이 끝난 상태에서 확인
- 새로고침 현상의 존재
- 서버에 높은 수준의 부하가 발생
- TTV, TTI 이슈 발생
SSG, Static Site Generation
요즘은...
React + Gatsby 나 React + Next 처럼,
미리 빌드업 해둔 html 파일을 보내고
만약, 동적 요소가 필요하다면 함께 보냅니다.
Issue
- TTI, Time to view, 최초 노출 시간
- TTV, Time to interact, 상호작용 가능 시간
CSR with TTI, TTV
CSR 은 TTV 가 끝난 시점에 TTI 가 가능하다.
SSR with TTI, TTV
SSR 은 TTV 가 끝나고 잠시 후에 TTI 가 가능하다.
클라이언트가 TTV 와 TTI 에서 괴리감을 느낄 수 있다.
References
