Hydration (interactive): 사용자가 next js기반 브라우저에 접속했을때, backend에서 빌드업된(server side)html을 보게된다. html이 만들어진 이후 react가 활성화되는 모든 과정을 hydration이라고 부른다.
만약! 개발자도구 sources에서 js를 비활성화한 상태에서 navigation bar링크를 클릭했을때 새로고침이 계속 반복되는걸 알 수 있다.
js를 활성한 상태에서 navigation bar링크를 클릭했을때 새로고침 없이 부드럽게 넘어가는걸 확인할 수 있다.
react가 hydrated된거임. 처음에는 <a>로 묶여있던 요소들이 react component로 바뀌게 된거임. react의 최대 장점이 변경이 필요한 데이터 파일만 변경해서 비동기적으로 페이지를 로드하는거였음. js를 활성화 시키면서, Link component가 clint side only navigation을 실행시켜주는거임.
과정을 살펴보면 이고임.
/about-us -> Boring HTML(no framework, no js) -> CLINTSIDE(^ㅡ^) -> !!REACT: init(Boring HTML)
하지만, 이러한 hydration 과정이 모든 compoent에 대해 발생하지 않는다.
server side component에서는 모든게 hydration 되지만, client server에서는 "use client"지시어를 맨 위에 갖고 있는 component만 hydration과정을 겪는다. 만약 컴포넌트를 생성하고 페이지에 "use client" 에러를 보게되면 아 client server compoent에 hydration이 필요하구나라고 생각하고 맨윗줄에 "use client"추가해주면 된다.
예시로,<h1>homepage</h1>제목이 상호작용이 필요할까? no 제목은 제목이지. 근데 여기에 만약 어떠한 액션을 추가하면 상호작용이 필요하긴 하겠찌만. ㅎ<button>need to be interactive</button> 반면에 버튼은? 클릭했을때 사용자는 어떤 이벤트가 발생하길 원하기때문에, 당연히 상호작용해야할 컴포넌트며, 이럴경우 "use client"를 추가해서 hydrated되게끔 만들어줘야한다 이고지.
next js는 왜 이런방식을 택하게 되었을까? 똑똑해서그런거임. 사용자입장에서 일부만 변경되는 데이터가 있다면, js코드를 전체 다운받을 필요없이, 변경이되는 부분만 다운받으면 훨씬 더 효율적이기 때문임.
