Client Component, Server Component를 이해하기 위해서는 Hydration에 대한 이해가 있어야 더 쉽게 이해할 수 있다.
Hydration
Hydration은 서버에서 렌더링 된 HTML과 JavaScript를 클라이언트에게 전달하면 클라이언트는 상호작용하지 않는 정적 HTML에 JavaScript를 매칭시켜 상호작용이 가능한 HTML로 만든다.
Hydration은 수분 공급이라는 뜻으로 상호작용하지 않는 정적 HTML에 상호작용이 가능해 지도록 JavaScript라는 수분을 공급한다고 이해하면 된다.
Client Component
"use client"
import Link from "next/link";
import { useState } from "react";
...next에서의 모든 컴포넌트들은 기본적으로 서버 사이드 렌더링(SSR)된다. 하지만 Hydration은 모든 컴포넌트에서 일어나지 않는다.
next에서는 Hydration 과정이 필요한 컴포넌트는 컴포넌트 최상단에 "use client" 지시어를 추가해야 하는 규칙이 있다. 지시어가 추가된 컴포넌트는 Hydration 과정이 필요한 컴포넌트로 Client Component라고 부른다.
"use client" 지시어의 client라는 단어로 인해서 지시어가 추가된 컴포넌트가 클라이언트 사이드 렌더링(CSR)을 한다고 오해하는 경우가 종종 발생하므로 주의가 필요하다.
정리하면, "use client" 지시어가 붙은 Client Component는 서버 사이드 렌더링(SSR)되며 Hydration 과정을 통해 사용자와 상호작용하는 컴포넌트라는 것을 꼭 기억하자.😀
Server Component
// Server Component로 동작한다.
"use server"
import type { Metadata } from "next";
import "./globals.css";
or
// 지시어가 없으면 Server Component로 동작한다.
import type { Metadata } from "next";
import "./globals.css";
...
next에서는 컴포넌트 최상단에 지시어를 작성하지 않거나 "use server" 지시어가 추가된 컴포넌트를 Server Component라고 부른다. 즉, 모든 컴포넌트는 Server Component가 기본이다.
Server Component는 Client Component와 다르게 Hydration하는 과정이 없으므로 한 번 렌더링되고 리렌더링이 필요없는 정적인 화면에 사용되며 사용자와 상호작용이 필요없는 컴포넌트에 사용된다고 생각하면 이해가 쉽다.
정리하면, 컴포넌트 최상단에 지시어가 없거나 "use server" 지시어가 있으면 Server Component로 동작한다. "Server Component"는 서버 사이드 렌더링(SSR)되며 Hydration 과정이 없어 사용자와 상호작용이 필요없는 컴포넌트에 사용된다.
정리
Client Component와 Server Component의 가장 큰 차이점은 Hydration 과정의 필요 유무이다. Client Component는 사용자와의 상호작용이 필요한 컴포넌트에 사용되며 Server Component는 상호작용이 필요없으며 한 번 렌더링 후 리렌더링이 필요없는 정적인 화면에 사용된다.
