[Next.js] Next.js 라우팅과 렌더링 원리

개요

---

Next.js를 활용하면 손쉽게 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 구현할 수 있다.

 

그렇다면 실제로 사용자가 접속할 때 Next.js는 어떻게 작동할까? 요청부터 화면 렌더링까지의 전 과정을 정리해 보았다.

---

Next.js 처리 흐름

---

1. 요청(Request)

사용자가 브라우저에서 특정 URL로 접근하면 HTTP 요청이 Next.js 서버로 전달된다.

---

2. 라우팅 처리 (File-based Routing)

🔀 Next.js에는 2가지 라우팅 시스템이 있다.

폴더 위치	pages/	app/
도입 시기	Next.js 초기부터	Next.js 13 이상
사용 방식	getStaticProps, getServerSideProps 등	서버 컴포넌트, params, searchParams 등
파일명 규칙	index.tsx, about.tsx, [id].tsx	항상 page.tsx, layout.tsx
라우팅 방식	파일 기반	파일 + 폴더 기반
SSR/SSG 방식	명시적 함수 필요	자동 처리 (비동기 함수로 서버렌더링 가능)

 

보편적으로 사용되는 방식은 App Router이다.

 

app/ 또는 pages/ 디렉토리 안의 page.tsx, layout.tsx, loading.tsx 등은 반드시 소문자여야 한다.

 

✅ 올바른 예
app/
├── page.tsx
├── layout.tsx
❌ 잘못된 예 (라우팅 안됨)
├── Page.tsx
├── Layout.tsx

 

이건 Next.js 내부에서 해당 이름을 특수하게 인식해서 자동 라우팅하기 때문이다.

 

대문자를 사용할 시 Next.js가 알지 못하기 때문에 주의가 필요하다.

---

3. 렌더링 방식 결정

Next.js는 페이지마다 렌더링 방식을 선택할 수 있다.

 

렌더링 방식의 특징과 대표 함수는 다음과 같다.

SSR (Server-Side Rendering)	매 요청 시 HTML 생성	getServerSideProps
SSG (Static Site Generation)	빌드 시 HTML 미리 생성	getStaticProps, getStaticPaths
ISR (Incremental Static Regeneration)	일정 주기로 HTML 재생성	revalidate 옵션 사용
CSR (Client-Side Rendering)	클라이언트에서 렌더링	일반 React처럼 useEffect, fetch 등 사용

➡ 해당 페이지가 어떤 방식인지 판단해서 HTML과 데이터를 준비한다.

---

4. HTML과 JSON 전달

• SSR/SSG/ISR이면 HTML을 서버에서 생성해서 클라이언트로 전달한다.
• 클라이언트는 React hydration을 통해 동작을 이어받는다.
• CSR이면 빈 HTML + JS 파일만 내려주고 클라이언트에서 fetch를 사용해 데이터를 요청하여 렌더링한다.

---

5. 클라이언트 측에서 React 동작 시작

• React hydration: 서버에서 생성된 HTML을 React가 takeover 해서 이벤트 바인딩 등을 실행한다.
• 라우팅이 발생하면 next/link 또는 next/router를 통해 CSR 방식으로 페이지를 이동한다.
  • 이 경우 새로고침 없이 JSON만 받아서 빠르게 렌더링한다.(Client-side navigation).

---

최종 전체 흐름

최종적인 전체 흐름은 다음과 같다.

 

[요청] → [라우팅 매칭] → [렌더링 방식 판단] → [HTML + 데이터 생성] → [클라이언트로 전달] → [Hydration 또는 CSR]