사용자가 about-us 페이지로 가면 next.js는 응답하기 전에
서버에서 모든 page와 component를 render하고 초기 상태에서 render를 하는 것이다.
그리고 HTML로 만들어서 사용자들에게 건네준다.
뒷단에서 프레임워크가 초기화되고 초기 HTML의 위에 React application을 생성한다.
그러면 button, link 등 일반 HTML이 상호작용이 가능한 HTML이 된다.
그리고 eventListener들이 추가되며 웹사이트를 동적이고 상호작용하게 만든다.
use client는 프레임워크에게 해당 component는 client에서 상호작용해야 하고 hydrated 되어야 한다고 전달한다.
따라서 초기 load에서 next.js는 이 component를 render 한다.
그리고 HTML을 사용자에게 전달하고 난 후 eventListener들을 추가할 component를 hydrate한다.
use client는 오직 client에서만 render된다는 것을 의미하지 않고
backend에서 render되고 frontend에서 hydrate됨을 의미한다.
'영화 > React, NextJS, Typescript, Vercel' 카테고리의 다른 글
| 10. 루트그룹과 메타데이터 (0) | 2025.05.13 |
|---|---|
| 09. 레이아웃 (0) | 2025.05.13 |
| 07. 하이드레이션(Hydration) 개념 (0) | 2025.05.13 |
| 06. SSR과 CSR 개념 (0) | 2025.05.08 |
| 05. 경로를 찾을 수 없습니다 (0) | 2025.05.08 |
