ROUTING - #2.4 Hydration

1. 폴더 이름 = URL 주소

2. 각 폴더에 page 파일이 있어야, page파일에 있는 자료가 화면에 뿌려짐

 

3. app폴더 하단에 components 폴더만들어서 관리 가능, page.tsx파일이 없기 때문에 해당 폴더는 화면에 보이지 않음.

4. not-found 파일로 잘못 기입된 url 주소에 대해 화면에 보여줄 수 있다.

 

 

5. components/navigation.tsx

usePathname을 통해, 현재 url 주소를 파악하여, active되고 있는 모습을 보여 줄 수 있다.

"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>
  );
}

 

 

6. 기본적으로 nextjs는 서버 사이드 렌더링 (SSR)이다. 백엔드에서 렌더링이 완료 된 후, 클라이언트로 보내준다. (SEO 유리)

 

<참고>

렌더링이란?
NextJS가 리액트 컴포넌트를 브라우저가 이해할 수 있는 html로 변환하는 작업

CSR
모든 렌더링이 클라이언트 측에서 발생
클라이언트는 자바스크립트를 로드하고, 자바스크립트가 UI를 빌드함

SSR
NextJS로 웹 사이트를 빌드할 때, 기본적으로 SSR을 사용함

Nextjs에서 모든 컴포넌트와 페이지들은 먼저 서버에서 렌더됨
('use client' 사용 여부와 상관없음)

 

7. 하이드레이션(Hydration)이란?

서버사이드 렌더링(SSR)을 통해 만들어 진 인터랙티브 하지 않는 HTML을 클라이언트 측 자바스크립트를 사용하여 인터랙티브한 리액트 컴포넌트로 변환하는 과정을 말한다. ("use client" 사용에 한해 hydrate됨)
(서버 환경에서 이미 렌더링된 HTML에 React를 붙이는 것)