usePathname hook 및 CSR&SSR

2025.1.6 화요일의 공부기록-이어서

Next.js에서 usePathname은 현재 URL 경로를 가져오는 데 사용되는 훅(Hook)이다. 하지만 이 훅은 클라이언트 컴포넌트에서만 동작하므로, 사용 시 몇 가지 주의해야 할 사항이 있다.

---

usePathname의 사용법

기본 사용법

usePathname 훅을 사용하면 현재 페이지의 경로를 쉽게 가져올 수 있다.

import { usePathname } from 'next/navigation';

export default function CurrentPath() {
  const pathname = usePathname();

  return (
    <div>
      <p>Current Path: {pathname}</p>
    </div>
  );
}

---

발생 가능한 에러와 해결 방법

에러 원인

Next.js에서 usePathname 훅은 클라이언트 컴포넌트에서만 동작한다.
만약 서버 컴포넌트에서 이 훅을 사용하면 다음과 같은 에러가 발생한다:

Error:   × You're importing a component that needs `usePathname`. This React hook only works in a client component. To fix, mark the file (or its parent) with the `"use client"` directive.

해결 방법

"use client"; 지시문을 코드 상단에 추가하여 해당 컴포넌트를 클라이언트 컴포넌트로 설정해야 한다.

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

export default function Navigation() {
  const path = usePathname();
  console.log(path);
  return (
    <nav>
      <Link href="/">Home</Link> {path === "/" ? "🏠" : null}
      <Link href="/about-us">About Us</Link>{" "}
      {path === "/about-us" ? "🔥" : null}
      <Link href="/tomato">Tomato</Link> {path === "/tomato" ? "🍅" : null}
    </nav>
  );
}

"use client"는 Next.js에게 해당 파일이 클라이언트 컴포넌트임을 명시적으로 알리는 역할을 한다.

---

렌더링의 개념

렌더링이란 Next.js가 React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환하는 작업을 의미한다.
Next.js는 렌더링 방식을 선택적으로 지원하며, 다음과 같은 주요 렌더링 방식이 있다:

CSR (Client-Side Rendering)

• 특징: 모든 렌더링이 클라이언트(브라우저) 측에서 발생한다.
• 작동 방식: 브라우저는 초기 HTML을 로드한 후, 자바스크립트를 로드하여 UI를 빌드한다.
• 장점: 페이지 전환이 빠르고, 동적인 콘텐츠를 처리하기 유리하다.
• 단점: 초기 로딩 속도가 느릴 수 있으며, SEO에 불리할 수 있다.

SSR (Server-Side Rendering)

• 특징: 서버에서 페이지를 렌더링한 후, HTML을 브라우저에 전달한다.
• 작동 방식: 브라우저가 요청을 보낼 때마다 서버에서 HTML을 생성한다.
• 장점: SEO와 초기 로딩 속도가 뛰어나다.
• 단점: 서버 부하가 증가할 수 있다.

---

Next.js와 렌더링

Next.js에서 컴포넌트와 페이지는 기본적으로 서버에서 렌더링(SSR)된다.
이는 "use client" 사용 여부와 상관없이 적용되며, SSR을 기본 전략으로 삼는다.

예외:

• 클라이언트 컴포넌트("use client"가 명시된 경우)는 CSR(Client-Side Rendering) 방식으로 렌더링된다.

---

"use client" 추가 설명

"use client" 사용 여부와 상관없이 적용되며, SSR을 기본 전략으로 삼는데, 클라이언트 컴포넌트("use client"가 명시된 경우)는 CSR(Client-Side Rendering) 방식으로 렌더링된다는 말이 무슨 말인지 잘 이해가 가지 않아 추가적인 조사를 진행했다. 이 내용은 다음 포스트에서 자세히 다룰 예정이다.

---

간단요약

1. usePathname은 클라이언트 컴포넌트에서만 동작한다.

   • 클라이언트 컴포넌트를 명시하려면 코드 상단에 "use client"를 추가해야 한다.
   • 서버 컴포넌트에서 사용할 경우 에러가 발생한다.

2. 렌더링 개념

   • CSR: 클라이언트 측에서 렌더링하며, 동적 콘텐츠에 적합하지만 초기 로딩 속도가 느릴 수 있다.
   • SSR: 서버 측에서 렌더링하며, SEO와 초기 로딩 속도에서 유리하다.

3. Next.js의 렌더링 기본 동작

   • 모든 컴포넌트와 페이지는 기본적으로 SSR을 사용한다.
   • 클라이언트 컴포넌트는 "use client"로 명시해야 CSR 방식으로 동작한다.