📖 TIL - Next.js 라우팅과 렌더링 방식에 대한 정리

슘·2025년 3월 17일

next rendering routing

📖 TIL

목록 보기

74/90

🗂️ 폴더 기반 라우팅

Next.js는 app 디렉토리 내의 폴더 구조를 기반으로 URL 경로가 자동으로 생성된다. layout, loading, error 등의 특수 파일은 같은 디렉토리 및 하위 디렉토리에 자동으로 적용된다.

🔄 동적 라우팅

정확한 세그먼트 이름을 미리 알지 못하고 동적 데이터로 경로를 생성하고 싶을 때는 동적 세그먼트를 사용할 수 있다.

동적 세그먼트는 대괄호로 묶어 만든다. 예: detail/[id]/page.tsx
이를 통해 detail/1/page.tsx, detail/2/page.tsx 등 다양한 경로 생성 가능

🛠️ generateStaticParams

Next.js에서 generateStaticParams 함수는 동적 라우트 중에서 빌드 시점에 미리 생성할 특정 경로를 지정하는 기능이다.

// app/faq/[category]/page.js
export async function generateStaticParams() {
  // FAQ 카테고리 목록
  const categories = [
    { slug: 'account-issues' },
    { slug: 'billing-questions' },
    { slug: 'product-features' },
    { slug: 'troubleshooting' }
  ];
  
  return categories.map((category) => ({
    category: category.slug,
  }));
}

이렇게 하면 빌드 과정에서:
1. Next.js가 generateStaticParams 함수를 실행
2. 반환된 매개변수 목록(4가지 카테고리)을 확인
3. 각 매개변수에 대해 페이지를 미리 렌더링하여 HTML 파일 생성
4. 사용자 요청 시 서버에서 다시 렌더링할 필요 없이 바로 제공하여 로딩 속도 향상

📌 URL 파라미터 접근 방법

파라미터 값을 가져오는 두 가지 방법이 있다:

컴포넌트의 props로 접근:

export default function Page({ params }) {
  const { id } = params;
  return <div>ID: {id}</div>;
}

useParams 훅 사용:

'use client'
import { useParams } from 'next/navigation';

export default function Page() {
  const params = useParams();
  return <div>ID: {params.id}</div>;
}

개인적으로는 서버 컴포넌트를 유지할 수 있는 첫 번째 방법(props)이 더 효율적이라고 생각한다. 클라이언트 컴포넌트로 변환하지 않아도 되고, 추가 import 없이 간결하게 코드를 유지할 수 있다.

🔗 Link 컴포넌트

클라이언트 사이드 네비게이션 방식으로 페이지를 이동하는 방법:

<Link href="/detail">상세 페이지로</Link>

일반 <a> 태그: 전체 페이지를 새로고침하며 서버에서 새 HTML 파일을 받아옴
<Link> 컴포넌트: 프리패치(미리 데이터 가져옴) 방식으로 브라우저가 전체 새로고침 없이 화면 전환

🗃️ 라우트 그룹 (Route Groups)

괄호 () 로 감싼 폴더는 URL 경로에 포함되지 않으며, 하위 폴더만 경로에 포함된다.

app/
├── (shop)/           # URL에 포함되지 않음
│   ├── layout.tsx    # shop 그룹 전용 레이아웃
│   ├── products/     # /products 경로
│   └── categories/   # /categories 경로
└── layout.tsx        # 루트 레이아웃

장점:

관심사별로 라우트를 그룹화하여 가독성 향상
각 그룹에 별도의 레이아웃 적용 가능
같은 URL 레벨의 페이지들에 서로 다른 레이아웃 적용 가능

예를 들어, /page-a와 /page-b 경로가 서로 다른 레이아웃을 사용하도록 할 수 있다:

app/
├── (with-layout)/
│   ├── layout.js    # 이 레이아웃은 이 폴더 안의 페이지에만 적용
│   └── page-a/
│       └── page.js  # /page-a 경로, 레이아웃 적용
├── (without-layout)/
│   └── page-b/
│       └── page.js  # /page-b 경로, 다른 레이아웃 적용
└── layout.js        # 루트 레이아웃

🔄 병렬 라우트(Parallel Routes)

@ 기호로 시작하는 폴더로 특정 페이지에 대한 레이아웃 적용을 조작할 수 있다:

app/
├── @with-layout/
│   ├── layout.js
│   └── page-a/
│       └── page.js  # /page-a, 레이아웃 적용
├── @without-layout/
│   └── page-b/
│       └── page.js  # /page-b, 레이아웃 적용 안됨
└── layout.js        # 조건부로 레이아웃 적용 로직 포함

루트 레이아웃에서 조건부 렌더링:

// app/layout.js
'use client'
import { usePathname } from 'next/navigation';

export default function RootLayout({ children, withLayout, withoutLayout }) {
  const pathname = usePathname();
  
  if (pathname.startsWith('/page-b')) {
    return <>{withoutLayout}</>;
  }
  
  return (
    <html>
      <body>
        <Header />
        <Sidebar />
        <main>{withLayout || children}</main>
        <Footer />
      </body>
    </html>
  );
}

🔒 비공개 폴더

언더스코어(_)로 시작하는 폴더는 URL 경로에서 완전히 제외된다. 이는 공개적으로 접근할 수 없는 유틸리티나 컴포넌트를 저장하는 데 유용하다.

app/
├── _utils/           # URL 경로에서 제외됨
├── _components/      # URL 경로에서 제외됨
└── products/         # /products 경로 사용 가능

🔄 렌더링 방식과 캐싱 전략

Next.js는 네 가지 주요 렌더링 방식을 지원한다:

1. 🏗️ SSG (Static Site Generation)

빌드 시점에 페이지를 미리 생성하여 Full Route Cache에 저장
사용자 요청 시 미리 렌더링된 HTML을 즉시 제공
데이터가 자주 변경되지 않는 페이지에 적합
기본 렌더링 방식으로, 별도 설정 없이 적용됨

2. 🔄 ISR (Incremental Static Regeneration)

빌드 시 프리렌더링 후, 일정 시간이 지나면 페이지 재생성

설정 방법:

1) Route Segment Config 사용:

export const revalidate = 5; // 5초 간격으로 재검증

2) fetch 옵션 사용:

fetch('https://api.example.com/data', { next: { revalidate: 5 } })

3. 🖥️ SSR (Server-Side Rendering)

사용자 요청마다 서버 컴포넌트가 실행되어 HTML 생성
설정 방법:

1) Route Segment Config 사용:
```
export const dynamic = 'force-dynamic'
```
2) fetch 옵션 사용:
```
fetch('https://api.example.com/data', { cache: 'no-store' })
```
3) 다음의 경우 자동으로 SSR 적용:
- 동적 라우팅 사용 시 (/detail/[id]/page.tsx)
- Dynamic Function 사용 시 (cookies(), headers() 등)

4. 💻 CSR (Client-Side Rendering)

"use client" 지시어가 있는 클라이언트 컴포넌트에서 수행
브라우저에서 실행되는 자바스크립트로 렌더링
React 훅, 이벤트 핸들러, window 객체 등을 사용할 때 필요
모범 사례: 페이지 전체를 클라이언트 컴포넌트로 만들기보다, 필요한 부분만 클라이언트 컴포넌트로 분리하는 것이 좋다

💧 Hydration

서버에서 생성된 정적 HTML이 클라이언트에서 자바스크립트를 통해 인터랙티브하게 변환되는 과정
작동 방식:
1. 서버에서 생성한 HTML을 먼저 화면에 보여줌(빠른 TTV - Time To View)
2. 자바스크립트가 로드되어 실행
3. DOM에 이벤트 핸들러가 연결되고 상태가 초기화됨(TTI - Time To Interact)
4. 이로써 웹페이지가 사용자와 상호작용 가능한 상태가 됨

이는 생기 없던 HTML 프레임에 자바스크립트 실행을 통해 생동감을 불어넣는 과정으로 볼 수 있다.