Routing, hydration

routing in React

• 라이브러리인 React에서는, routing 기능을 사용하려면 react router를 사용해야 했다.
⇒ url↔컴포넌트 수동 매칭

routing in NextJS

• 폴더 구조로 라우팅을 한다! ⇒ nextJS가 알아서 자동 매칭!

• app 내의 최상단 page.tsx가 루트경로(/)가 된다

• 경로 이름으로 폴더를 생성, 내부에 page.tsx 를 생성해서 렌더링될 컴포넌트를 작성한다

• (주의) page 외의 파일은 렌더링 되지도, 경로가 되지도 않는다(404)
• 다른 page에서 import하여 렌더링 할 수는 있겠다.

• 이를 이용해서 특정 경로를 의도적으로 제외할 수 있다.

• 또한 route group으로 라우터를 그룹핑 할 수 있음 ⇒ 이는 경로가 되지 않는다
• 방법 : 괄호로 묶어진 이름의 폴더를 만들어서, 그 안에 파일들을 넣는다
• ex. /layout.tsx와 /not-found등과 다르게, /page.tsx는 홈에서만 보이는 것. 그러므로 (home) 디렉토리 안에 넣어서 깔끔하고 명확하게 그룹핑한다!

not-found

import Link from "next/link";

export default function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/me">Me</Link>
        </li>
      </ul>
    </nav>
  );
}

• 현재 위치에 따라 링크 옆에 ⭐️을 붙이고 싶다.
⇒ usePathname이라는 next 훅을 사용

"use client";

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

export default function Navigation() {
  const path = usePathname(); //현재 pathname을 가져오는 훅
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home {path === "/" ? "⭐️" : ""}</Link>
        </li>
        <li>
          <Link href="/about-us">
            About Us {path === "/about-us" ? "⭐️" : ""}
          </Link>
        </li>
      </ul>
    </nav>
  );
}

• 훅을 쓴 곳의 최상위에서 "use client" 를 붙여주지 않으면 “Client Components가 아니라는” 에러가 난다



• (주의) useClient를 붙여도 여전히 서버에서 렌더링 된다.

hydration

단순 HTML(지루)을 React application(생동)으로 초기화 하는 것

1. 렌더링 : 브라우저가 이해할 수 있는 html로 변환하는 작업
• SSR과 CSR의 작동 방식(+SSR이 SEO에 좋은 이유) 에서 렌더링 방법 비교 참고
• CSR은 성능이 느린 환경에서는, 파일 다운로드하는데 시간이 많이 소요되어 빈 화면을 오래 지속

2. SSR과정 : 1) 서버에서 렌더링 > 2)framework 초기화 > 3)리액트 애플리케이션 초기화(hydration)

3. nextJS(SSR)에서 JS가 적용되기 전, 후
ex) nextJS의 Link컴포넌트를 써서 navigation을 했을 시
1. JS 적용 전(서버 렌더링 직후) ⇒ a 링크로 html이 변환이 되어 누를 때마다 새로고침
• UI가 있는 지루한 html을 넘겨줌
2. JS 적용 후(hydration 후) ⇒ 리액트의 Link컴포넌트가 작동(client side navigation)
• 리액트 애플리케이션 초기화(hydration)
• 코드가 백그라운드에 이미 로드 되어있음(prefetching) >> 속도가 훨씬 빠름
• use-client가 붙여진 컴포넌트들만 이 과정을 거침!!! ⇒ Client 컴포넌트

use-client

1. 즉, use client를 덧붙인 컴포넌트는 hydrate된다는 의미이고, 이를 client component라 부른다.
(use client가 안 붙여지면 Hydrate 과정을 거치지 않고 지루한 html 그대로임. server component)

2. 서버 컴포넌트는 클라이언트 컴포넌트를 가질 수 있음. but. 클라이언트 컴포넌트는 서버 컴포넌트를 xx
1. 즉, client 컴포넌트의 자식들은 모두 client 컴포가 되어야 함(4의 상황이 아니더라도)
2. 서버 컴포넌트는 브라우저로 가지 않아서 여러 보안 작업 가능 (ex. DB통신, API 코드 넣기)

3. hydrate된 컴포넌트만 사용자가 JS코드를 다운받게 됨 (CSR, 이전Next: 모든 코드를 다 다운)

4. client component가 되는 상황들 ~> 훅 사용(interactive), 이벤트 리스너 등록