Next.js의 Hydration 이해하기

요약

오늘 읽은 글: Understanding Hydration in Next.js

읽은 날짜: 2024년 8월 17일 토요일
읽은 이유: 이틀 전에 개발하는데 Hydration error때문에 공부좀 해야겠다고 생각이 들었다.

걸린 시간: 20분
링크: https://dev.to/rajaerobinson/understanding-hydration-in-nextjs-b5m

Understanding Hydration in Next.js

 

내용

Hydration이란?

SSR로 만들어진 초기 HTML 컨텐츠에 JS를 주입하는 것

Hydration 과정:
1. SSR로 1차 HTML 페이지 생성
2. 클라이언트로 HTML 전송
3. 클라이언트에서 JS 실행하여 컴포넌트 재생성
4. 서버에서 생성된 가상 DOM과 클라이언트 생성 쌍을 비교하여 동기화
5. 이벤트 처리 및 상호작용

Hydration 장점:
1. TTI(Time to Interactive) 감소
2. SEO와 접근성 향상
3. 향상된 성능 및 사용자 경험
4. 오류 발생 시 서버 컨텐츠 제공
5. 동적 업데이트, 코드 스플리팅 등 클라이언트 사이드 최적화 제공

 

단어

renowned 유명한
robust 강력한
capabilities 기능
seamless 원활한
imbuing 주입
retrieves 검색
acquisition 수집
delineating 묘사하다
sequential 일련의
incorporating 통합
server-derived 서버 파생
transmits 전송하다
encapsulates 캡슐화
Execution 실행
commences 시작하다
Reconciliation 조정
counterpart 짝
synchronizes 동기화하다
attain 달성하다
facilitating 촉진
transitions 전환
akin to 비슷한
instrumental 중요한
curtailing 축소
substantially 대체로
circumventing 회피
bolsters 보강
Augmented 증강
fosters 증진하다
expedited 신속
culminating 최고점에 달하는
Degradation 하락