인프런 "한 입 크기로 잘라먹는 Next.js" 수강
App Router의 네비게이팅
1️⃣ 페이지 이동의 기본 개념
Next.js의 페이지 이동은 Page Router 시절과 동일하게 CSR(Client Side Rendering) 방식으로 이루어진다.
즉, 한 번 페이지를 로드한 이후에는 브라우저 내에서 페이지 전환이 일어나며, 전체 새로고침 없이 부드럽게 이동한다.
하지만!
App Router에서는 "서버 컴포넌트(Server Component)"라는 개념이 추가되면서, Page Router 때와는 조금 다른 흐름이 생겼다.
2️⃣ App Router에서의 동작 방식
Page Router에서는 사용자가 페이지를 처음 방문하면, 서버가 JS Bundle(자바스크립트 묶음 파일) 을 보내준다.
그래서 만약 브라우저가 JS Bundle만 받게 된다면, 서버에서 렌더링된 내용(즉, 데이터)은 통째로 빠져버리게 된다.
JS Bundle에는 컴포넌트만 포함되어 있기 떄문!
이를 방지하기 위해서 Next.js는 JS Bundle과 함꼐 서버 컴포넌트의 결과물인 RSC Payload도 함께 전달한다.
즉, App Router의 페이지 이동은
JS Bundle + RSC Payload = 완성!으로,
이 두 가지가 함께 있어야 완전한 페이지가 구성된다.
3️⃣ 실습: 네비게이션바 구성하기
공통 네비게이션을 위해 Root Layout에 header 요소를 추가하고 실행해보자.
어떤 페이지로 이동하든 헤더가 고정된 채로 RSC Payload가 함께 전달되는 걸 확인할 수 있다.
특히 검색 페이지(/search)에 들어가면 RSC Payload만 전달되고 JS Bundle은 없는 걸 볼 수 있는데,
이건 /search 페이지는 순수한 서버 컴포넌트로 구성되어 있기 떄문이다. (= 서버 컴포넌트로만 이루어져 있어서 클라이언트 컴포넌트를 전달하지 않는다.)
App Router에서 페이지 이동은 Page Router 버전의 페이지 이동과 거의 동일하지만, Server Component의 추가로
- Response에 서버 컴포넌트는 RSC Payload로
- 클라이언트 컴포넌트는 기존의 JS Bundle로 전달되는
차이점을 기억하면 된다.
4️⃣ App Router의 페이지 이동
| 구분 | Page Router | App Router |
|---|---|---|
| 페이지 이동 방식 | CSR (Client Side Rendering) | CSR (Client Side Rendering) |
| 전송 데이터 | JS Bundle | JS Bundle + RSC Payload |
| 서버 컴포넌트 결과 | ❌ 포함 안 됨 | ✅ 함께 전송됨 |
App Router의 페이지 이동은 기존 CSR과 동일하지만, 서버 컴포넌트의 결과물이 추가로 포함된다!
함수로 페이지 이동하기
'next/navigation'의 useRouter를 사용하면, 클라이언트 컴포넌트에서 페이지 이동을 쉽게 제어할 수 있다.
'use client';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
export default function Searchbar() {
const router = useRouter();
const [search, setSearch] = useState('');
const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearch(e.target.value);
};
const onSubmit = () => {
router.push(`/search?q=${search}`);
};
return (
<div>
<input value={search} onChange={onChangeSearch} />
<button onClick={onSubmit}>검색</button>
</div>
);
}버튼을 누를 때 router.push()로 이동하는 방식은 기존 next/router의 useRouter와 거의 동일하다!
5️⃣ 정적 페이지와 동적 페이지의 응답 차이
App Router의 모든 페이지는 Static(정적) 또는 Dynamic(동적) 페이지로 분류된다.
| 구분 | 설명 | 예시 |
|---|---|---|
| Static 페이지 | 빌드 타임에 미리 생성되는 페이지 | /about, /contact |
| Dynamic 페이지 | 요청 시점에 즉시 생성되는 페이지 | /book/[id], /search?q=... |
Static 페이지는 Page Router 버전으로 SSG 방식.
Dynamic 페이지는 Page Router 버전으로 SSR 방식! 다시 기억하기
차이점 1. 음답 내용
정적 페이지
- RSC Payload + JS Bundle
- 프리패칭으로 빠르게 불러옴
동적 페이지
- RSC Payload만 응답
- JS Bundle은 데이터 변경 시점에서 로드됨
차이점 2. 빌드 결과 확인
npm run build를 실행하면, Next.js가 어떤 페이지가 정적/동적인지 표시해준다.
URL 파라미터를 사용하는 /book/[id]와 Query String을 사용하는 /search 는 동적 페이지로 설정된 걸 확인할 수 있다.
이처럼 분류된 이유는, Queryn String이나 URL 파라미터를 꺼내는 등 빌드 타임에 생성하면 안 될 것 같은 동작을 수행하는 경우는 동적인 페이지(Dynamic 페이지)로 설정되기 떄문이다.
✅ 정리하며
- App Router의 페이지 이동은 CSR 기반이다.
- 클라이언트 컴포넌트는 JS Bundle + RSC Payload가 함께 전달된다.
- App Router에서 페이지의 데이터는 서버 컴포넌트 RSC Payload로 전달된다.
- 순수 서버 컴포넌트 페이지는 JS Bundle이 없다.
- Query String 또는 URL Param을 사용하면 Dynamic 페이지로 분류된다.
- 정적(Static) 페이지의 경우 데이터의 업데이트가 필요하지 않으니 프리패칭으로 RSC Payload와 JS Bundle을 둘 다 불러오고,
- 동적(Dynamic) 페이지의 경우, 데이터의 업데이트가 필요할 수 있기 때문에 RSC Payload만 불러온다. JS Bundle의 경우 데이터 업데이트가 발생한 순간에 불러오게 된다.
