use client

Client component

지금까지 배운 hydrate 되는 client(= client에서 interactive하게 만들어질 components)는 코드 최상단에 “use client” 지시어를 가지고 있는 컴포넌트 뿐이다

// "use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";

export default function Navigation() {
  const path = usePathname();
  const [count, setCount] = useState(0);
  const handlePlusClick = () => {
    setCount(count + 1);
  };

  return (
    <nav>
      <ul>
        <li>
          <Link href={"/"}>Home</Link> {path === "/" ? "🔥" : ""}
        </li>
        <li>
          <Link href={"/about-us"}>About us</Link>{" "}
          {path === "/about-us" ? "🔥" : ""}
        </li>
      </ul>
      <div>
        <h3>{count}</h3>
        <button onClick={handlePlusClick}>+1</button>
      </div>
    </nav>
  );
}

• 이렇게 “use client”를 지우면

  

  이런식으로 client component에서만 사용할 수 있는 동작을 server component에서 사용했으니 “use client”를 마크하라는 에러가 표기된다
  

Server component

“use client” 를 사용하지 않는 모든 컴포넌트는 서버 컴포넌트이다

Server component와 Client component를 분리해서 뭐가 좋아지지?

프레임워크에게 어떤 컴포넌트가 인터렉티브하고 어떤 컴포넌트가 그렇지 않은지 알려준다면 인터렉티브 하지 않은 컴포넌트는 한번만 렌더하고 이후로 렌더하지 않아도 된다

따라서 사용자가 서버 컴포넌트는 Javascript 코드가 필요하지 않아서 Javascript 코드를 다운받지 않아도 되는데 이 말은 즉 사용자가 받아야 할 Javascript 코드의 양이 줄어드는 것이므로 페이지 로딩 속도가 빨라진다

정리

사용자는 "use client" 를 가진 컴포넌트의 Javascript 코드만 다운받게 된다

client component도 서버에서 먼저 render되고 hydrate 되는 것이다. 서버에서 render를 안하는 게 아니라는 점을 헷갈리지 말자