1. Hard Navigation
- 자바 스크립트: 비활성 상태
- a 태그의 href로 페이지 이동 시 전체 페이지가 새로 로드됩
- 자바 스크립트: 활성 상태
- SPA(싱글 페이지 애플리케이션) 구조에서 더욱 빠르고 역동적인 페이지 전환이 가능
2. Hydration
: 서버에서 미리 렌더링된 HTML을 클라이언트 측에서 React가 다시 바인딩하여 React 컴포넌트로 동작하게 만드는 과정
→ 단순히 정적인 HTML을 React 애플리케이션으로 전환하여 UI가 React에 의해 관리
인터랙티브한 기능이 추가
- “user client”가 있는 component에서만 일어남 / 모든 component에 일어나지 않음
- 백엔드에서 렌더링되고 프론트엔드에서 hydrate 및 interactive 됨
3. Hydration의 과정
- 초기 로드
- 사용자가 페이지에 접근하면, 서버에서 미리 렌더링된 HTML이 사용자에게 전달
- HTML은 "지루한 HTML"일 수 있지만, 이는 초기 로딩 속도를 빠르게 하기 위한 것
- React 초기화
- HTML이 로드된 후, React와 관련된 자바스크립트가 로드되며, Hydration 과정이 시작
- 기존의 정적 HTML이 React 애플리케이션으로 변환
- Client-side Navigation
- 이 시점부터는 페이지 이동이 Link 컴포넌트를 통해 관리
- 전체 페이지를 다시 로드하지 않고, Client-side Navigation이 이루어짐
- Interactivity
- React가 완전히 로드되기 전에는, 페이지 간 이동이 "Hard Navigation"처럼 동작할 수 있음
- React가 로드되고 난 후에는 모든 네비게이션이 빠르고 인터랙티브하게 동작
Share article