[강의] 한 입 크기로 잘라먹는 Next.js #6

Onion·2025년 8월 17일

Next.js 공부

목록 보기

6/11

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi
위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

페이지 캐싱

1. 풀 라우트 캐시 (1)

1) 풀 라우트 캐시(Full Route Cache)

Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능
= 빌드 타임에 정적으로 미리 생성이 되어서 풀 라우트 캐시에 보관

2) 풀 라우트 캐시가 시행되는 페이지는?

Next.js 앱에서 만들어 둔 모든 페이지는 자동으로 나뉨

정적인 static 페이지 ← 여기에 풀 라우트 캐시 wjrdyd
동적인 dynamic 페이지

▼ 그렇다면 Next.js 앱에서는 static 페이지와 dynamic 페이지를 어떻게 구분할까?

Dynamic 페이지를 구분하는 기준
- 특정 페이지가 접속 요청을 받을 때마다 매번 변화가 생기거나 데이터가 달라질 경우
  → (서버 컴포넌트에서) 캐시되지 않는 Data Fetching을 사용할 경우
  → (서버 컴포넌트에서) 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을 때
Static 페이지를 구분하는 기준
- Dynamic 페이지가 아니면 모두 Static 페이지가 된다 (기본값)

3) 풀 라우트 캐시도 Revalidate 가능

빌드타임에 생성해서 보관해둔 페이지를 특정 시간을 주기로 재생성, 즉 갱신하는 것도 가능

2. 풀 라우트 캐시 (2)

1) 실습을 위한 환경 준비

vscode로 열기
vscode에서 .../onebite-next/ 폴더로 열기
터미널에서 section05 폴더 생성
vscode에서 /onebite-next/section05/ 폴더 생성
파일 옮기기
/onebite-next/section04 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section05 폴더로 옮기기

필요한 모듈 다운로드
생성된 /section05/ 폴더로 vscode에서 다시 열기
→ vscode 터미널을 열어서 npm i 명령어 실행
개발 모드로 넥스트 앱 실행
생성된 /section05/ 폴더로 vscode에서 다시 열기
→ vscode의 터미널 열기
→ npm run dev 명령어 실행
→ http://localhost:3000/ 로 이동하면 확인 가능
→ (종료 시에는) Ctrl+D나 Ctrl+C 입력
백엔드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
→ vscode 터미널을 열고 npm run start 명령어 실행

2) 실습

개발 서버 구동할 때 생성되는 오류 해결: /src/app/(with-component)/layout.tsx 코드 수정
https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter02/src/app/(with-searchbar)/layout.tsx
static 페이지로 수정 가능한 컴포넌트들 수정
- /src/app/layout.tsx 코드 수정
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter02/src/app/layout.tsx
- /src/app/(with-searchbar)/layout.tsx 코드는 수정할 거 없음
- /src/app/(with-searchbar)/page.tsx 코드 수정
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter02/src/app/(with-searchbar)/page.tsx

=> index 페이지가 static 페이지로 잘 설정됐는지 확인

vscode 터미널에 npm run build 명령어로 실행해서
생성된 /section05/.next/server/app/index.html의 코드를 통해 확인 가능

3. 풀 라우트 캐시 (3): 동적 경로에 적용하기

1) 실습 진행을 위한 환경 세팅

vscode로 section05 폴더 열기
→ vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
→ vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

static 페이지로 수정 가능한 컴포넌트들 수정
- /src/app/(with-searchbar)/search/page.tsx 코드 수정
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter03/src/app/(with-searchbar)/search/page.tsx
  → 원래 해당 페이지는 동적으로 동작하기 때문에 static 페이지로 수정하지 않아도 되지만, 풀 라우트 캐시 적용을 위해 수정하고 싶다면 위 코드와 같이 수정 진행
- /src/app/book/[id]/page.tsx 코드 수정
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter03/src/app/book/%5Bid%5D/page.tsx
  → URl 파라미터에 값을 명시할 때는 문자열만!!

4. 라우트 세그먼트 옵션

라우트 세그먼트 옵션 관련 공식 문서
https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

export const dynamic 옵션: 특정 페이지의 유형을 강제로 static 또는 dynamic 페이지로 설정해주는 옵션
- export const dynamic = "auto"; 아무것도 강제하지 않는 옵션 / 코드에 따라 페이지의 유형을 자동으로 설정
- export const dynamic = "force-dynamic"; 페이지를 강제로 dynamic 페이지로 강제하는 옵션
  - 특별한 상황이 아니면 권장되지 않음
- export const dynamic = "force-static"; 페이지를 강제로 static 페이지로 강제하는 옵션
  - 해당 옵션은 dynamic 페이지에 적용할 경우 기능이 제대로 동작하지 않음
- export const dynamic = "error"; 페이지를 강제로 static 페이지로 설정하되, static으로 설정하면 안되는 기능이 있다면 빌드 오류를 발생시키는 옵션

5. 클라이언트 라우터 캐시

1) 클라이언트 라우터 캐시

클라이언트인 브라우저에 저장되는 캐시
페이지 이동을 효율적으로 진행하기 위해 페이지의 일부 데이터를 보관
중복된 레이아웃은 브라우저 측의 캐시에 저장, 중복되지 않은 페이지 등만 따로 불러오게 설정 가능
새로고침이 되거나 아예 탭을 껐다가 다시 접속하는 경우에는 동작하지 않음

▼ 풀 라우트 캐시 진행 과정

▼ 이때 중복 발생

▼ 클라이언트 라우터 캐시 전체 진행 과정

2) 실습 진행을 위한 환경 세팅

vscode로 section05 폴더 열기
→ vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
→ vscode 터미널을 열고 npm run start로 백엔드 서버 열기