[Next.js] SSR, hydration, use client

복습

Hydration은 서버에서 렌더링된 정적인 HTML 콘텐츠를 클라이언트 측에서 JavaScript와 React 상태로 활성화하여 동적이고 인터랙티브한 웹 페이지로 만드는 과정을 말한다.

예를 들어 서버에서 생성된 HTML이 아래와 같을 때,

<div id="root">
  <button>Click me</button>
</div>

클라이언트에서 React가 이 HTML에 연결하여 이벤트를 활성화하는 과정을 거쳐

const App = () => {
  const handleClick = () => alert("Clicked!");
  return <button onClick={handleClick}>Click me!</button>;
};

hydrateRoot(document.getElementById("root"), <App />);

코드 속 우리가 의도한 button이 사용자에게 보여지게 된다.

저번에 헷갈렸던 부분은 hydration은 React의 기능인데
왜 next의 장점이라고 하는것인지. 였는데 SSR에서만 hydration이 필요하겠구나 싶었다. CSR 환경에서는 클라이언트가 HTML을 동적으로 생성하기 때문이다.

정리해보면,

• CSR 환경에서는 서버에서 미리 생성된 HTML이 없고 React가 처음부터 클라이언트에서 모든 것을 렌더링하기 때문에 Hydration이 필요없다.
• Hydration은 React꺼고,
  Next.js는 이를 기반으로 SSR과 CSR을 결합하여 활용하는 프레임워크다.

거런데

SSR은 모든 컴포넌트에 발생하지만,
client에서 hydrate되는 컴포넌트는 use client 지시어를 가지고 있는 컴포넌트들 뿐이다. 헉슨

놀라기 전에 곰곰히 다시 생각해보면 use client 지시어가 없는 컴포넌트는 hydration의 도움이 필요가 없다는 걸 알 수 있다.

use client의 의미는
저기 거짝. 이 컴포넌트 말이지 클라이언트에서 인터랙티브 해야 해
와 같다.

hydration의 역할은 컴포넌트를 React client와 연결해서 동적이고 인터랙티브하게 만들어주는 것이라서, use client 지시어가 필요없는 컴포넌트는 hydration도 필요가 없는거다.

이렇게 use client 지시어가 없는 컴포넌트를 서버 컴포넌트라고 부른다.
클라이언트 컴포넌트는 backend에서 render -> frontend에서 hydrate 되고
서버 컴포넌트는 backend에서 render -> 끝이다.

사용자는 클라이언트 컴포넌트의 자스 코드만 다운로드 받으면 되는 것이고,
이것은 페이지 로딩 속도를 빠르게 만든다.

Reference

니꼬쌤