서버 컴포넌트 vs 클라이언트 컴포넌트

Next.js에서 언제 어떤 컴포넌트를 서버/클라이언트로 사용해야 하는지 이해하는 게 중요하다.
기본적으로 Next.js는 서버 컴포넌트 기반으로 동작한다.

• 서버 컴포넌트는 서버에서만 렌더링되며,
• HTML을 미리 만들어 보내 SEO에 유리하고, 초기 로딩 속도가 빠르다.

하지만 useState, useEffect, usePathname 같은 React 훅을 사용하는 순간,
해당 컴포넌트는 클라이언트 컴포넌트로 전환되어야 하며, 이때는 use client 지시어를 지정해야 한다.

❗️ 문제는 ? 서버 컴포넌트 안에서 훅 하나 때문에 전체가 클라이언트 컴포넌트로 변하면, 서버 렌더링의 장점이 사라진다.

그래서 정말 필요한 부분만 클라이언트 컴포넌트로 분리해서 아웃소싱하는 것이 좋다.

예시 : 네비게이션 링크 컴포넌트

<NavLink href="/news">News</NavLink>

// components/NavLink.js
'use client';

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

export default function NavLink({ href, children }) {
  const path = usePathname();
  return (
    <Link
      href={href}
      className={path.startsWith(href) ? "active" : undefined}
    >
      {children}
    </Link>
  );
}

이렇게 NavLink만 클라이언트로 분리해서 서버 컴포넌트에서 가져다 쓰면,
전체 서버 렌더링 구조는 유지하면서도 동적인 UI만 클라이언트로 처리할 수 있다.

❗️Error 컴포넌트는 예외

app/error.js는 서버에서 발생한 에러뿐 아니라 클라이언트 상호작용 중 발생한 에러까지 처리해야 하므로 클라이너트 컴포넌트로 만들어야 한다.

✅ 결론

• 가능한 모든 컴포넌트는 서버 컴포넌트로 유지하자.
• 동적인 상호작용이 필요한 부분만 use client로 분리하자.
• 전체를 클라이언트로 바꾸지말고, 구체적인 역할만 위임하는 구조가
  ➤ 성능, 유지보수, SEO 모든 면에서 유리하다.