NEXT.JS : Hydration, 'use client'

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

Hydration?

Hydration
초기 Html 파일을 먼저 전달하고 이후 HTML 요소들을 React 컴포넌트로 변환 및 이벤트리스너를 부착하여 React DOM에서 관리하게 하는 과정.

개발자도구에서 자바스크립트를 끄고 link를 클릭하면 페이지가 새로고침 되는 것을 확인 할 수 있다.

컴포넌트 link는 브라우져에서 a태그로 읽히므로 a태그를 클릭했을 때 페이지가 새로고침 되는것은 당연하다.

하지만 다시 자바스크립트를 활성화 하고 컴포넌트 link를 클릭하면 새로고침없이 페이지가 바뀌는 것을 확인 할 수 있는데, React의 Hydrated된 상태라고 하며 초기에 a태그 뭉치였던 것들이 자바스크립트가 활성화가 되면서 React component로 변환 된 것을 말한다.

리액트 Hydration은 페이지 전체를 reload하지 않고 빠르게 navegatie하게 되며 이것을 "interactive:상호작용하다"고 표현한다.

요약

Hydration은 단순 HTML을 React application으로 초기화 하고 interactive하게 변화시키는 과정을 말함.

'use client'

위에서 설명한대로 HTML파일이 React Hydrated되려면 component 최상단에 'use client'가 임포트 되어있어야한다. 즉 파일 최상단의 'use client'를 갖고있는 component만 React Hydrated가 가능하다는 말이다. == interective component

'use client'를 언제쓸까?

이부분은 고민할 필요가 없다. 컴포넌트를 만들었을 때 hydrete가 필요하다면 error로 힌트를 줄 것이다.

'use client'의 함정

use client를 사용하게 되 경우, 컴포넌트를 hydrate하기 위해서 JavaScript를 다운받게 된다. 많은 컴포넌트에서 use client하게 될 경우 그만큼의 읽어들일 스크립트의 양이 많아지므로 render속도가 느려지게 된다.

요약

• 모든 컴포넌트는 SSR로 render되어 HTML로 변환
• use client를 가진 client 컴포넌트만이 hydrate 및 interective 됨
• use client와 일반 server component를 적절히 사용하는 것이 효율적

추가
use client를 갖지 않은 컴포넌트는 sever에만 존재하므로 보안문제가 없음 (DB통신 가능)