[NextJS14] Routing 1

foresec·2024년 1월 21일

NextJS

목록 보기

2/6

1. Routes

NextJS에서의 페이지 라우팅은 기본적으로 폴더구조 + page파일로 이루어진다

이와 같은 구조일 때,

http://localhost:3000
http://localhost:3000/about-us
http://localhost:3000/about-us/company/sales
이렇게 3가지 경우에만 라우팅이 된다.

http://localhost:3000/about-us/company 이 경우, page.tsx가 없어 404에러를 받게 됨.

components폴더를 따로 지정하여 tsx파일을 생성하더라도 page.tsx가 아니라면 영향 받지않음

2. Not Found Routes

not-found.tsx

다음과 같이 not-found.tsx를 지정할 시, 기본 주소 이하의 어떤 지정하지 않은 url을 입력해도 not-found.tsx에 입력한 정보로 이동함

3. SSR vs CSR

usePathname

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

export default function Navigation() {
  const path = usePathname();

  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/about-us">About Us</Link>
        </li>
      </ul>
    </nav>
  );
}

이와 같이 작성할 때, 다음과 같은 에러가 발생한다

usePathname으로 인한 오류인데, use client를 상단에 작성해야 오류가 해결된다.
그 이유는 usePathname이 현재 URL path를 읽을 수 있는 Client 컴포넌트 hook이기 때문이다. 즉, 의도적으로 Client component를 사용해야 함.

CSR와 SSR

먼저 간단하게 CSR보다 SSR의 차이점을 설명하자면 다음과 같다

CSR은 빈 HTML파일을 받아오므로 렌더링에 관한 내용이 담긴 JS가 실행되기까지 user가 아무것도 볼 수 없음(끊기거나 기다리는 시간 발생). 하지만 SSR은 이미 서버에서 어느정도 완성된 HTML 파일을 받아 렌더링하여 위와 같은 단점이 없어짐
SEO(검색엔진 최적화)에 유리함

use client

다시 돌아와서 얘기하자면
다음과 같이 use client를 추가하면 오류가 사라진다

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

export default function Navigation() {
  const path = usePathname();

  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link> {path === "/" ? "😀" : ""}
        </li>
        <li>
          <Link href="/about-us">About Us</Link>{" "}
          {path === "/about-us" ? "😀" : ""}
        </li>
      </ul>
    </nav>
  );
}

Navigate 역할을 하는 컴포넌트가 맨 처음으로 페이지 로드가 일어날 때 렌더링이 됨. 하지만 routing이 일어날 때마다 매번 다시 fetch될 필요가 없기 때문에
-> CSR이 더 적절함(전형적인 CSR의 장점이다)

즉, Next.js가 기본적으로 SSR을 지원하지만 필요에 따라 CSR을 하기 위해 use client를 상단에 입력, client component처럼 사용할 수 있으며 동적인 역할을 수행할 수 있음

또한, use client는 오직 client측에서만 렌더링이 일어나는 뜻이 아님. 렌더링이 BE에서 일어나고 hydrate가 FE에서 일어난다는 것

아무튼 오류 자체의 결론은 usePathname이 Client Component Hook이기 때문임

4. Hydration

Hydration = 수화... 간단하게 메마른 정적 웹사이트에 물을 주듯 요소들을 채우는 것

서버로부터 Pre-rendering된 정적인 HTML 및 state(메마른 뼈대 상태)에 클라이언트 측에서 HTML과 JS 매칭을 통해 이벤트 헨들러 등의 이벤트를 활성화시켜 동적이고 상호작용이 가능한 React application을 만드는 것

user는 SSR을 통해 UI를 먼저 보고, Hydration을 통해 동적인 조작 가능

hydrate과정을 통해 서버에서 제공된 HTML을 무시하고 클라이언트 측에서 새로 리렌더링할 필요가 없어짐

즉, 사용자는 빠른 초기 로딩 + 원활한 상호작용 경험 가능

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

export default function Navigation() {
  const path = usePathname();
  const [cnt, setCnt] = useState(0);

  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link> {path === "/" ? "😀" : ""}
        </li>
        <li>
          <Link href="/about-us">About Us</Link>{" "}
          {path === "/about-us" ? "😀" : ""}
        </li>
        <button onClick={() => setCnt((c) => c + 1)}>{cnt}</button>
      </ul>
    </nav>
  );
}