1. 네비게이팅
- App Router에서는 페이지를 어떻게 이동하는가? 원리는 Page Router와 동일하다.
다만, RSC Payload가 추가로 전달된다.
- App Router에서는 Server Component 개념의 추가로 인해 구조가 살짝 달라진다.
-> 페이지 이동에서 JS Bundle에는 Cilent Component만 포함되기 때문에.
-> RSC Payload을 통해 Server Component도 전달해주어야 한다.
2. 네비게이션 UI는 어디에?
- 글로벌 네비게이션 UI는? 루트 레이아웃에 위치하면 된다.
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
<header>
<Link href={"/"}>index</Link>
<Link href={"/search"}>search</Link>
<Link href={"/book/1"}>book/1</Link>
</header>
{children}
</body>
</html>
);
}- App Router에서도 Link 컴포넌트를 이용해서 페이지를 이동한다.
3. 프리페칭 Pre-Fetching
- Page Router 시간에 다루었던 개념 복습.
-
프리페칭 Pre-Fetching, 이동할 페이지에 필요한 컴포넌트를 JS Bundle로 받을 때. 요청이 들어올 때마다 작업을 실행하게 되면 번들 크기나 네트워크 상황에 따라 시간 지연이 발생할 수 있다. 그래서 이동할 페이지의 데이터를 미리 불러오는 프리페칭 작업을 통해 이를 최소화한다.
-
페이지가 정적인 경우에는 JS Bundle까지 모두 불러온다.
-> Page Router에서의 SSG 방식에 해당 (미리 만들어놓고 반환)하기 때문. -
페이지가 동적인 경우에는 JS Bundle은 생략하고, RSC Payload만 불러온다.
-> Page Router에서의 SSR 방식에 해당 (요청이 들어올 때마다 생성하여 반환)하기 때문. -
페이지의 유형이 정적/동적인 경우에 따라 프리페칭 Pre-Fetching가 다르게 동작한다.
-> 동적 페이지는 데이터가 모두 필요한지 아닌지 명확하게 파악할 수 없기 때문에 JS Bundle을 생략한다.
4. useSearchParams()
-
App Router에서는 Page Router와 달리, Router 객체에서 쿼리스트링을 가져올 수 없다.
-> App Router는 Router 객체에서 query 객체를 포함하지 않기 때문. -
따라서 App Router에서는 쿼리스트링만 따로 가져올 수 있는 Hook useSearchParams()을 사용해야 한다.
-> Next.js가 자체적으로 제작해서 제공하는 Custom Hooks. -
현재 페이지에 전달된 쿼리스트링의 값을 가져올 수 있는 기능을 제공한다.
// Page Router 방식
router.query.q;
// App Router 방식
const searchParams = useSearchParams();
const q = searchParams.get("q");00. 강의 소개.
- 해당 학습은 이정환 Winterlood님의 한 입 크기로 잘라먹는 Next.js(15+)을 기반으로 진행되고 있습니다.
프론트엔드 개발자를 준비하고 있습니다.