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

2025. 4. 15. 23:18·Next.js
목차
  1. 개요
  2. Next.js 처리 흐름
  3. 1. 요청(Request)
  4. 2. 라우팅 처리 (File-based Routing)
  5. 5. 클라이언트 측에서 React 동작 시작
  6. 최종 전체 흐름

개요


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]

'Next.js' 카테고리의 다른 글

[Next.js] Spring boot 서버로부터 Session 토큰 받은 후 자동 저장하기  (2) 2025.05.02
[Next.js] 리디렉션을 처리하는 여러 방법  (1) 2025.04.24
[Next.js] Next.js에서의 에러 경계 설정과 스트리밍 기반의 로딩 UI 구현 전략  (0) 2025.04.20
[Next.js] 네비게이션 작동 원리  (0) 2025.04.19
  1. 개요
  2. Next.js 처리 흐름
  3. 1. 요청(Request)
  4. 2. 라우팅 처리 (File-based Routing)
  5. 5. 클라이언트 측에서 React 동작 시작
  6. 최종 전체 흐름
'Next.js' 카테고리의 다른 글
  • [Next.js] Spring boot 서버로부터 Session 토큰 받은 후 자동 저장하기
  • [Next.js] 리디렉션을 처리하는 여러 방법
  • [Next.js] Next.js에서의 에러 경계 설정과 스트리밍 기반의 로딩 UI 구현 전략
  • [Next.js] 네비게이션 작동 원리
MaKa_
MaKa_
이게 왜안될까요
  • MaKa_
    벌레 잡는 사람
    MaKa_
  • 전체
    오늘
    어제
    • 공부 (48)
      • CS (18)
        • 자료구조(data structure) (7)
        • 알고리즘(Algorithm) (6)
      • React (6)
      • React Native (2)
      • Next.js (5)
      • Backend (3)
      • 이야기 (4)
        • 회고 (3)
        • 일상 (1)
      • 기타 (7)
      • 알고리즘 문제 (2)
        • 백준 (0)
        • 프로그래머스 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • 깃허브
  • 공지사항

  • 인기 글

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
MaKa_
[Next.js] Next.js 라우팅과 렌더링 원리

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.