[Next] Hydration, useClient

웹, 모바일 화면 로딩이 중요한 덕목!

Next에서는 이러한 부분들을 더 빠르게 사용자들에게 제공하기 위해 Hydration, useClient개념을 사용

 

왜 하이드레이션이 필요한가

• 서버사이드 렌더링을 통해 브라우저는 즉시 HTML을 표시할 수 있어 초기 로드 속도가 빠르다.
• 하이드레이션 과정에서 자바스크립트가 로드되고 이벤트 리스너가 부착되어 동적 기능이 활성화된다.
• 서버사이드 렌더링된 HTML은 검색 엔진 크롤러가 쉽게 읽을 수 있어 SEO에 유리하다.

하이드레이션 동작 방식

1. 서버에서 HTML내용을 사용자에게 내려 줌
2. 사용자는 HTML을 먼저 보기때문에 빠르다고 생각 함
3. 뒤에서는 하이드레이션을 실행하면서 interactive가 일어남

useClient

 

- Next.js 13에서 소개된 app/ 디렉토리와 함께 등장한 use client 지시문은 특정 컴포넌트나 페이지가 클라이언트 사이드에서만 렌더링되어야 함을 명시하는 용도로 사용된다.
이 지시문은 컴포넌트 파일의 맨 위에 배치하여 사용하며, Next.js 프레임워크에게 해당 컴포넌트가 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG) 대신에, 오직 클라이언트 사이드에서만 렌더링되어야 한다는 것을 알린다.