Next.js에서 use client 뭔지 알고 쓰자

Next.js를 사용하시는 분들이라면, 공부를 해보신 분들이라면 "use client"로 페이지 렌더링을 어떻게 할지 설정한 경우가 있을 거에요. 아 혹시!! 렌더링을 설정한다는 것도 모르겼나요?? 괜찮습니다. 제가 그랬거든요.

오늘은 "use client"!!!!
"대체 언제 써야 하고, 왜 중요한 거지?" 에 대해서 알려드릴게요!

---

1. Next.js: 서버에서? 브라우저에서?

Next.js는 SSR(서버 사이드 렌더링) 덕분에 서버에서 HTML을 미리 만들어서 쏴줍니다. 덕분에 SEO에도 좋고 초기 로딩도 빠르죠! 근데… 모든 걸 SSR로 해결할 수는 없어요. 🤔 예를 들어, 우리가 버튼을 클릭하거나 스크롤 이벤트를 처리하고 싶다면 브라우저에서 실행해야겠죠?

여기서 바로 CSR(클라이언트 사이드 렌더링)이 필요해요. 그리고 Next.js에서는 "use client" 선언을 통해 "이 컴포넌트는 브라우저에서 돌아가야 한다!"고 알려주는 거예요. 💡

즉, 기본은 SSR을 사용하지만, 특수한 경우 "use client"를 사용하여 CSR을 사용하겠다! 라고 말하는거죠.

---

2. use client가 뭐야?

"use client"는 클라이언트 컴포넌트를 선언하는 문장입니다. 👀 서버 컴포넌트가 기본값이라 컴포넌트에 아무런 선언을 하지 않으면 서버에서 돌아가요.

서버 컴포넌트(Server Component)

서버 컴포넌트는 서버 측에서만 실행되고, HTML을 미리 생성해서 클라이언트로 전달하는 컴포넌트예요. 이 컴포넌트는 서버 자원을 활용해서 데이터베이스와 연동하거나, 무거운 연산을 처리하는 데 적합해요.

클라이언트 컴포넌트(Client Component)

클라이언트 컴포넌트는 브라우저에서 실행되는 컴포넌트입니다. 버튼 클릭 이벤트, 입력 필드 처리, 상태 관리 등 사용자와의 인터랙션이 필요한 부분에 사용돼요. 서버에서는 실행되지 않기 때문에 브라우저 전용 기능(예: window, localStorage)도 사용할 수 있어요.

근데 우리가 클라이언트에서만 가능한 작업을 하려고 하면? 예를 들면 window 객체를 건드린다거나, useState로 상태를 관리하는 거요. 이때는 "use client"를 선언해 줘야 하는 거죠! 이 친구 없으면 서버는 아~무것도 모르고 에러를 뱉을 수 있어요. 😂

---

3. 언제 use client를 써야 할까?

자, 이제 "use client"를 꼭 써야 하는 경우를 몇 가지 알려드릴게요!

1) 상태 관리와 이벤트 처리

클라이언트에서 상태(useState)를 관리하거나 버튼 클릭 같은 이벤트 처리를 하고 싶다면?

"use client"; 

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

이 컴포넌트는 무조건 브라우저에서 돌아가야 해요! 서버에서는 useState를 지원하지 않으니까요.

 

2) 브라우저 전용 API 사용

window, document 같은 브라우저 객체는 서버가 알 수 없는 영역입니다. 예를 들어, 사용자의 화면 크기를 감지해보고 싶다면 이렇게 해야겠죠?

"use client";

import { useEffect, useState } from "react";

export default function WindowSize() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return <div>Window width: {width}px</div>;
}

서버에서는 실행이 안 되는 코드입니다. 이럴 때 "use client"를 사용합니다.

 

3) useEffect로 비동기 작업 수행

클라이언트에서 데이터를 불러와야 할 때도 "use client"가 필요합니다.

"use client";

import { useEffect, useState } from "react";

export default function FetchData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      {data.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

이런 비동기 작업은 서버가 아니라 브라우저에서 실행돼야겠죠?

---

4. SSR vs CSR: 언제 뭐 쓰면 좋을까?

SSR (서버 사이드 렌더링)CSR (클라이언트 사이드 렌더링)

SSR (서버 사이드 렌더링)	CSR (클라이언트 사이드 렌더링)
서버에서 HTML을 미리 만들어 보낸다.	브라우저에서 모든 렌더링이 일어난다.
SEO에 유리하고 초기 로딩이 빠르다.	사용자 인터랙션에 더 적합하다.
서버 리소스를 사용한다.	브라우저 리소스를 사용한다.

👉 요약:

• 초기 로딩 속도와 SEO가 중요하다면 SSR!
• 사용자 인터랙션과 상태 관리가 많다면 CSR!

---

"이 컴포넌트는 브라우저에서 돌아가야 한다!" 싶을 때, 망설이지 말고 "use client"를 선언하세요. Next.js는 기본적으로 서버에서 렌더링되니까, 브라우저 전용 기능이 필요할 때만 CSR로 바꿔주면 됩니다.하지만 불필요한 곳에도 "use client"를 마구마구 사용하면 번들의 크기가 커져버려요.. 그래서 정말 필요한 곳에만 사용하는게 중요합니다!