📌 Next.js 페이지 라우터(페이지 기반 라우팅) 총정리 🚀

2025. 3. 5. 21:55ㆍ프론트엔드/Next JS

728x90

📌 Next.js 페이지 라우터(페이지 기반 라우팅) 총정리 🚀

Next.js에서는 파일 시스템 기반의 페이지 라우팅을 사용하여 손쉽게 라우팅을 구현할 수 있습니다.
React의 기본적인 클라이언트 사이드 라우팅(CSR) 방식과는 다르게, 사전 렌더링(SSG, SSR, ISR 등)을 지원하여 더 빠른 FCP(First Contentful Paint)를 제공합니다.

이 문서에서는 **Next.js 페이지 라우터의 장점과 다양한 렌더링 방식(SSG, SSR, ISR, On-Demand ISR)**을 정리하고, 라우팅의 단점과 최적화 방법까지 자세히 설명합니다.

✅ 1. Next.js의 페이지 라우터란?

Next.js는 파일 시스템 기반의 라우팅을 지원합니다.
즉, pages/ 폴더 내에 파일을 생성하면 해당 파일명이 자동으로 URL 경로가 됩니다.

📌 예제: pages 폴더 구조

pages/
  ├── index.tsx  → `/` (홈 페이지)
  ├── about.tsx  → `/about`
  ├── books/
  │   ├── index.tsx  → `/books` (도서 목록)
  │   ├── [id].tsx   → `/books/:id` (동적 라우팅)
  ├── api/
  │   ├── hello.ts   → `/api/hello` (API 라우트)

📌 Next.js는 이 구조를 기반으로 자동으로 라우팅을 설정합니다.

✅ 장점

React Router처럼 수동으로 라우팅을 설정할 필요 없음
Link 컴포넌트를 사용하여 손쉽게 네비게이션 가능
getStaticProps, getServerSideProps 등과 결합하여 SEO 최적화 가능

✅ 라우팅 방식

정적 라우트 (/about)
동적 라우트 (/books/[id])
API 라우트 (/api/hello)

✅ 2. Next.js의 페이지 라우터 장점

🔹 1. 파일 시스템 기반의 간편한 페이지 라우팅

pages/ 폴더 내부의 파일명만으로 라우팅이 자동 설정됨
useRouter 또는 Link를 사용하여 간편한 페이지 이동 가능

🔹 예제: Next.js에서 페이지 이동하기

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <Link href="/about">소개 페이지로 이동</Link>
    </div>
  );
}

🔹 2. 사전 렌더링을 제공하여 SEO 최적화 가능

Next.js는 기본적으로 **SSG(Static Site Generation) 또는 SSR(Server Side Rendering)**을 통해 사전 렌더링을 제공합니다.
이 때문에 일반적인 CSR(클라이언트 사이드 렌더링)보다 SEO에 훨씬 유리합니다.

📌 기존 React (CSR 방식)

HTML이 먼저 브라우저에 전달됨 (빈 상태)
JavaScript가 실행되면서 데이터 페칭 후 UI가 렌더링됨
검색 엔진 크롤러가 HTML을 가져갔을 때 내용이 없는 경우 발생

📌 Next.js (SSG, SSR 방식)

HTML이 사전 렌더링된 상태로 제공되므로 검색 엔진이 내용을 바로 가져갈 수 있음

✅ 3. Next.js의 렌더링 방식

Next.js는 4가지 렌더링 방식을 제공합니다.

방식 실행 시점 SEO 사용 예시

CSR (Client Side Rendering)	클라이언트에서 실행	❌ (SEO 불리)	대시보드, 로그인 페이지
SSR (Server Side Rendering)	요청 시 서버에서 실행	✅ (SEO 최적)	사용자 맞춤형 페이지, 실시간 데이터
SSG (Static Site Generation)	빌드 시점에 실행	✅ (SEO 최적)	블로그, 제품 상세 페이지
ISR (Incremental Static Regeneration)	일정 시간마다 정적 페이지 갱신	✅ (SEO 최적)	뉴스, 이벤트, 상품 목록

🔹 1) SSR (Server Side Rendering)

사용자가 페이지에 접속할 때마다 서버에서 새롭게 페이지를 생성
최신 데이터를 반영할 수 있지만, 매번 서버 요청이 필요하므로 속도가 느릴 수 있음
예: 뉴스 사이트, 로그인 후 맞춤 페이지

📌 SSR 코드 예제

export const getServerSideProps = async () => {
  const data = await fetch("https://api.example.com/news").then((res) => res.json());

  return {
    props: { data },
  };
};

✅ SEO 최적화 가능하지만, 요청마다 실행되므로 서버 부하가 큼
❌ 페이지 로딩 속도가 느릴 수 있음

🔹 2) SSG (Static Site Generation)

빌드 시점에 페이지를 미리 생성하여 정적 HTML로 제공
SEO 최적화가 뛰어나며, 페이지 로딩 속도가 매우 빠름
예: 블로그, 제품 상세 페이지

📌 SSG 코드 예제

export const getStaticProps = async () => {
  const data = await fetch("https://api.example.com/products").then((res) => res.json());

  return {
    props: { data },
  };
};

✅ 정적 HTML 제공으로 빠른 로딩 속도
❌ 실시간 데이터 반영 어려움

🔹 3) ISR (Incremental Static Regeneration)

SSG + SSR의 장점을 결합한 방식
기존의 정적 페이지를 일정 시간마다 다시 생성하여 최신 데이터 유지
예: 뉴스, 이벤트 페이지, 도서 목록

📌 ISR 코드 예제

export const getStaticProps = async () => {
  const data = await fetch("https://api.example.com/news").then((res) => res.json());

  return {
    props: { data },
    revalidate: 10, // 10초마다 페이지 갱신
  };
};

✅ 정적 페이지처럼 빠르면서 최신 데이터 유지 가능
✅ 서버 부하가 낮음
❌ 즉시 데이터 반영이 어려울 수 있음

🔹 4) On-Demand ISR (사용자 요청 시 페이지 재생성)

관리자가 특정 페이지를 즉시 업데이트하고 싶을 때 사용
예: 관리자가 게시글을 수정했을 때 즉시 반영

📌 On-Demand ISR API 예제

export default async function handler(req, res) {
  try {
    await res.revalidate("/books/1"); // 특정 페이지 갱신
    res.json({ revalidate: true });
  } catch (err) {
    res.status(500).send("Revalidation Failed");
  }
}

✅ 즉시 데이터 반영 가능
✅ 서버 부하를 줄이면서도 최신 데이터 제공 가능
❌ 설정이 필요하며 API 요청이 필요함

✅ 4. Next.js 페이지 라우터의 단점

1️⃣ 페이지별 레이아웃 설정이 번거롭다 → _app.tsx 또는 getLayout을 활용하여 해결 가능
2️⃣ 데이터 페칭이 페이지 컴포넌트에 집중됨 → React Query 또는 SWR을 사용하여 해결
3️⃣ 불필요한 컴포넌트가 JS 번들에 포함됨 → 코드 스플리팅(dynamic import()) 활용

✅ 5. 결론

Next.js는 파일 기반의 간단한 라우팅 시스템을 제공
SEO 최적화 & 빠른 렌더링을 위해 SSR, SSG, ISR을 지원
On-Demand ISR을 활용하면 실시간 데이터 반영도 가능
코드 스플리팅, 레이지 로딩 등을 통해 단점을 보완 가능 🚀