[nextjs] Hydration

next.js로 빌드된 페이지에 들어가면 next.js가 그 페이지와 component들을 기본적으로 backend에서 render한다

next.js가 코드를 html로 변환하고 그걸 브라우저에 넘겼다

사용자가 처음보게 되는 것이 그거
사용자는 이 html을 보는 거다

그래서 js가 리액트 코드를 읽고 실행시키는 걸 기다리 필요가 없다
사용자는 에템 즉시 보게될것 어떤 콘텐트나 유아이
따라서 자스 비활성화되거나 느리게 로드 되어도 최소한의 에템은 잇을것

사용자가 최초 에템 본 뒤에 어떤 일이 발생할지 리액트가 언제 활성화 될까
그 과정을 하이드레이션이라 함

브라우저에서 자스 비활성화하면 네비게이션 전환이 발생할 때마다 새로고침(load) 발생
achor 태크를 눌러 이동하는 거니 로드되는 게 맞음
다른 페이지로 이동하게 됨

다르 페이지로 들어가서 로드되는 걸 하드 네비게이션이라 함 에이 태그의 href만 사용하고 있음 자스는 비활성화 되어서 전혀 사용하지 않고 그냥 anchor만 누르고 있는 거임

자스를 활성화 하면? 네비게이션 전환 시 리프레쉬 발생안함
리액트가 하이드레이티드 된건데, 이게 처음에는 anchors 묶음이었다가 react component로 변환된 것임
그래서 여기에 클릭이 발생되어도 react가 끼어드는 것임
그래서 페이지 전체를 리로드하지 않고 빠르게 navigate 할 수 있게 됨
이제, 이것들은 더 이상 평범한 a 태그가 아님
click이 발생하면 Link component가 처리하게 됨

Link component는 Client side only navigation을 수행하고 있음 그게 바로 동작이 빠르면서 새로고침이 되지 않는 이유임

페이지에 도달하면 ui를 가지고 있는 dummy HTML이 반겨줌
그리고 나서 프레임워크는 즉시 load를 시행
리액트, 컴포넌트 로드, 모든 것이 초기화됨
그러고 나면 app이 react app이 됨
그러고 나서야 interactive해지고, navigation이 빨라지는 것을 볼 수 있음

hard refresh없이 client side navigation이 되는 것임
더 이상 anchors은 없는 거임, html을 보면 존재하는데 이것들은 javascript에 의해 제어되고 있음

about-us 페이지로 넘어가고 싶음 -> next는 그 요청을 보고 우리 컴포넌트를 dummy html(interactive하지 않은)로 변환함 -> 그것이 사용자에게 주어짐 (정적인 사이트) -> 사용자가 페이지에 도착하는 즉시 프레임워크는 load를 시작함 -> html에 새로운 react application을 초기화 함 ->
사용자가 about-us에 접속을 시도하면 우리는 사용자에게 backend에서 생성된 지루한 html을 넘겨줌 -> html을 interactive하게 만들기 위해 그 뒤에서 react application을 초기화하고 있음 ->

사용자가 페이지에 도착한 순간에는 javascript, framework도 로드되지 않은 것
그래서 이것들은 그냥 단순한 anchors임
그러고 나서 아주 빠르게 react application이 초기화되고 그러고 나면 navigation이 react component가 되는 것임

그러고 나면 이제 리액트가 앱을 넘겨받고 하드 리프레쉬 없이 네비게이트 할 수 있게 됨

만약 어떤 이유로 자스 로드에 긴 시간이 걸리면, 프레임워크가 초기화하는 게 오래 걸리면 사용자는 여전히 페이지 사이를 네비게이트 할 수 있지만 아직 리액트 컴포넌트가 아니기 때문에 네비게이션은 하드 네비게이션이 될 것이고 화면이 새로고침 될 것

자스가 로드되는 순간(모든 준비가 완료된 순간) 비로소 이 네비게이션들이 인터렉티브하게 되는 것

state를 사용한다고 해보자. 소스코드를 보면 단순히 버튼 태그 안에 0으로 렌더되어 있는 게 보인다. 그냥 버튼과 스테이트의 초기값으로 넣었던 0인 것. 만약 자스가 비활성화 되거나 로드에 시간이 오래 걸리는 경우, 클릭은 할 수 있는데 동작하진 않을 것 -> 아직 이 버튼에 이벤트리스너가 연결되지 않았기 때문.
자스, 즉 리액트가 버튼에 이벤트리스너를 연결시킬 거다.
그리고 state같은 것들과 연결시키는 것
그러고 나서야 우리 컴포넌트가 iteractive해지는 것

/about-us ----> 0 -----> :)(즉시 뒤쪽에서 우리는 프레임워크를 로드) ------> (프레임워크 초기화) onClick eventListener가 연결된 버튼이 됨

위에 이게 hydration 프로세스다
hydration은 단순 html을 react app으로 초기화 하는 작업
먼저 0이 쓰인 것 외에 아무 것도 없는 버튼을 받고,
react를 initialize 하여 onClick을 부착해 기능을 수행하게 함

dehydrated (탈수된) -> 지루한 html을 dehydrated strawberry와 같다고 생각하면 됨
react나 프레임워크가 클라이언트에 로드되면, 우리는 그 app을 hydrate하는 것
그러면 그걸 완전한 functional interactive app으로 변환시킬 수 있는 것