2022. 11. 17. 17:51ㆍPost
https://velog.io/@wnsguddl789/Web-FrontEnd-Hydration
https://aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices
위 글에서 배운 것과 내가 밑줄치면서 이해한 부분을 정리 했다.
SSR 의 경우 pre-rendering을 통해 완성된 HTML을 클라이언트에게 전달하는데,
이렇게 서버에서 렌더링된 정적 문서를 클라이언트에게 보내고, React는 번들링된 JS 코드를 클라이언트에게 보낸다.
-> 이걸 좀더 와닿게 말하는? 방법이 있을까 모르겠는데, 쨌든 결국엔
정적 문서 즉 html
동적 파일
을 토대로 사용자가 보는 화면이 구성된다는 것이 되겠다.
클라이언트는 전달받은 Html, JavaScript를 매칭하는 Hydrate 작업을 수행하게 되는데
전송받은 JavaScript들이 이전에 보내진 Html Dom 요소 위에서 한번 더 렌더링 하게 되며 각기 본인의 자리르 찾아가며 매칭되는 작업
을 Hydrate라고 한다.
Hydrate이후에 클릭과 같은 이벤트나 모듈들이 적용되어 사용자 조작이 가능해진다.
즉 Hydrate는
클라이언트 측 JavaScript가
정적 호스팅 또는 서버 측 렌더링을 통해 전달 되는
정적 Html 요소에
이벤트 핸들러를 첨부하여
동적 웹페이지로 변환되는 기술
SSR 덕분에 사용자는 UI를 먼저보고 / Hydrate 덕분에 JS코드가 매칭되어 사용자 조작이 가능한것이다.
-> 계속해서 뭐 같은 말이긴 한데-
개념 이해할때는 동어반복도 도움이 되니까...!
당연히 걍 정적파일로는 클릭이벤트를 브라우저가 득할 수 없을 것이다. 해서 hydrate이후의 시점에 대한 용어도 있다.
TTV
- Time-To-View
- 사용자가 웹브라우저에서 컨텐츠를 볼 수 있는 시점
TTI
- Time-to-Interact
- 사용자가 웹브라우저에서 인터렉션 할 수 있는 시점
맨 처음에, 정적파일로 보이는 페이지는 ttv / 실제로 사용자가 다양한 인터랙션을 할 수 있는 시점은 번들링 된 js 파일을 받고 난 이후인 tti 시점 이 되겠다.
그래서 csr 즉 정적파일 없이 js파일로만 사용자에게 보낼때, 효율적으로 분할하여 사용자가 첫번째로 보게되는...?? 것을 어떻게하면 필수적인 것만 보낼 수 있을지 고민이 되어야 한다.
ssr 의 경우에는 인터랙션할수있는 시간의 차를 줄이는 고민을 해야한다. 매끄럽게 보여야 할테니...
그 밖에, ssr 이 이미 정적으로 구성된 html 파일을 serving 하고 있으므로 seo 에 유리 한 것이다.
'Post' 카테고리의 다른 글
| showcase | next.js (0) | 2022.11.18 |
|---|---|
| 웹페이지 분석도구 | wappalyzer (0) | 2022.11.18 |
| chsh -s /bin/bash (4) | 2022.11.11 |
| create template. index.html (0) | 2022.11.10 |
| python 테스트 프레임워크 (1) | 2022.11.08 |