[Next.js 14] Hydration과 "use client"

🚩 이 글은 노마드코더의 Next.js 시작하기 강의를 보고 정리한 글입니다. 

 

 

 

 

사용자가 '/about'이라는 페이지로 접근한다고 할 때,

next.js가 그 요청을 받으면 /app/about/page.tsx 컴포넌트를 html로 변환하여 응답으로 보내 사용자에게 보여준다.

 

이 때의 사용자에게 보여지는 html은 아무 인터렉션이 일어나지 않는 정적인 html 페이지이다.

동시에 next.js는 load를 시작해 react application을 초기화하여 정적인 html을 인터렉티브하게 만든다.

 

한마디로, 사용자가 /about에 접근했을 순간에는 javascript도, 프레임워크도 로드되지 않은 상태인

단순한 html파일이 보여지는 상태이다.

 

그 후 아주 빠르게 react가 initialize되면서 단순 HTML이 react component가 되는 것이다.

 

즉, hydration은 우리가 받은 HTML 위에서 react application을 실행한다는 뜻이다.

(어떠한 HTML을 실제 interactive한 react 컴포넌트로 바꾸는 것)

 

 

 

 

next.js 14에서 이 hydration은 모든 컴포넌트에서 일어나진 않는다.

 

우선, next.js에서 기본적으로 모든 컴포넌트는 server side에서 pre render된다.

 

이 중 client에서 hydrate되는 컴포넌트,

즉 onClick, useState 등을 통해 client에서 인터렉티브하게 만들어질 컴포넌트는

"use client"를 가지고 있는 컴포넌트 뿐이다.

(의미적으로 use client보다 use hydrate가 적합할지도)

 

"use client"를 선언한 컴포넌트는 server에서 render되고, client에서 hydrate된다. => 얘네를 client component

"use client" 를 선언하지 않은 컴포넌트는 server에서 render되고, hydrate되지 않는다. => 얘네를 server component

 

"use client"선언은 client에서만 render한다는게 아니라 client에서도 render된다는 뜻이다.

 

 

 

 

만약, 해당 컴포넌트를 인터렉티브하게 만들 필요가 없다면

즉 해당 컴포넌트가 client에 딱 한번 render되고 다시 render될 일이 없다면

사용자에게 불필요한 자바스크립트 코드를 다운받게 할 필요가 없다.

이는 페이지 로딩속도에 영향을 준다.

 

use client로 hydrate할 컴포넌트를 선택하는 점은 next.js 14에서 사용할 수 있는 새로운 방식이다.

이전에는 모든 컴포넌트가 hydrate 되었다.

 

 

server component 안에 client component를 갖는 것은 가능하다.

반대로 client component안에 server component를 갖는 것은 불가능하다.

use client를 사용하면 모든 children이 client component가 된다.

 

 

server component 코드는 딱 한번만 서버에 의해 server에서만 실행되니까 

server component에서는 보안을 신경쓰지 않고 DB와 통신할 수 있다.

(= client component 의 자바스크립트는 사용자가 다운로드하여 실행하지만 

server component의 자바스크립트는 사용자가 다운로드 하지 않기 때문에 client로 가지 않아 보안을 신경쓰지 않아도 된다.)

 

 

 

 

 

정리

 

next.js는 우리가 언제 페이지로 가든지 사용자에게 응답이 주어지기 전에 backend에서 우리 application을 pre render 한다.

 

모든 컴포넌트를 가져가서 non인터렉티브한 HTML로 바꾼다. 그리고 그것을 사용자에게 보여준다.

 

사용자가 웹사이트에 도착하자마자 HTML을 전달하고 그리고나서 프레임워크와 React.js를 initialize한다.

 

그리고 "use client" 명령어를 가진 컴포넌트가 hydrate된다.