[데이터 페칭]

JAMEe_·2025년 11월 18일

New NEXT.JS 톺아보기

목록 보기

2/6

App Router 에서의 데이터 페칭

필요한 컴포넌트에서 필요한 데이터를 불러오자
중복 요청을 보내도 Request Memoization 으로 인해 한 번의 요청만 간다

fetch 를 통한 API 요청 시 아래 이미지와 같이 동작한다

API 콘솔 찍는 방법

// config.js

const nextConfig = {
	logging:{
    	fetches:{
        	fullUrl:true,
        }
    }
}

다양한 fetch 캐시 옵션들 (데이터 캐시)

no-store: 캐시 저장x
force-cache: 캐시 저장
next:{revalidate:3}: 3초간 캐시 저장, 3초 이후 요청 들어오면 stale 상태로 변경되고 우선 이 stale 값으로 페이지 그리고나서 다음 요청 부터 최신 데이터로 그려짐

3초 경과 => 요청 => stale 값 => 요청 => 최신 데이터
즉, 2번째 요청부터 최신 데이터로 갱신되어 그려짐

next:{tags:["a"]}: 요청이 들어왔을 때 데이터를 최신화

※ 데이터 캐시

백엔드서버로부터 불러온 데이터를 거의 영구적으로 보관하기 위해 사용
서버 가동중에는 영구적으로 보관된다

Request Memoization

하나의 페이지를 이루고 있는 여러개의 컴포넌트에서 중복적으로 발생하는 요청들을 캐싱해서 한 번만 요청하도록
하나의 페이지를 렌더링하는 동안 중복된 API 요청을 캐싱하기 위해 존재
렌더링이 종료되면 모든 캐시가 소멸된다
아래 이미지는 no-store 기준

Full Route Cache

Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능(SSG)
Static Page 에 대해서만 Full Route Cache 적용
대부분의 페이지를 Full Route Cache 를 지원하는 Static Page 로 만들것을 권장

Dynamaic Page

캐시되지 않는 Data Fetching 사용하는 경우
동적 함수( 쿠키, 헤더, 쿼리스트링 )를 사용하는 경우

fetch 에 revalidate 가 선언된 경우 데이터 캐시 및 풀 라우트 캐시도 업데이트됨(ISR)
이것도 동일하게 지난 후 요청 시 stale 값을 보여주고, 이후 요청 시 갱신된 데이터 및 페이지 반환

빌드 에러 발생

// SearchBar.tsx

"use client"
...
const searchParams = useSearchParams();

빌드 과정에서 서버에서 사전 렌더링 시 서버 컴포넌트와 클라이언트 컴포넌트를 실행하여 페이지를 그리는데
쿼리스트링의 값은 알 수 없으므로 에러가 발생
그래서 아래와 같이 수정해주어야함
사전 렌더링에서 배제되고, 오직 클라이언트 측에서만 렌더링되도록

"use client"
...
<Suspense fallback={<div>Loading...</div>}>
	<SearchBar/>
</Suspense>

useSearchParams() 는 비동기 함수
즉, 클라이언트에서 쿼리스트링을 불러오는 때인 브라우저에 마운트 되는 시점 전까지 Suspense

generateStaticParams

Page Router 에서 SSG 형식을 위해 getStaticPaths 설정해준 것처럼
App Router 에서도 Static Page 를 위해 generateStaticParams 설정하면
빌드과정에서 설정한 Params 로 Static Page 생성

※주의: 만약 fetch 에 cache 설정이 되어있지 않더라도 이 페이지는 Static Page 로 생성됨

export function generateStaticParams(){
	return [{id:"1"},{id:"2"},{id:"3"}]
}

export default async function Page({params}){
	const {id} = params; // 1,2,3
	...
}

위 코드는 1, 2, 3 이외에 Param 에 접근하면 Dynamic Page 로 생성되고,
next 캐시에 등록되어 다시 접근 시 Static Page 로 반환

반대로 1, 2, 3 이외에 접근 시 404 페이지로 리다이렉트 시켜주고싶다면

export const dynamicParams = false;

🤔 궁금한점..
슬러거의 경우 Dynamic Page 로 생성?
generateStaticParams 설정 안해주면 Dynamic Page 인가?
그럼 next 서버에도 캐시된 페이지가 저장이 안되나?

라우트 세그먼트

풀 라우트 캐시를 설정하기 위해 데이터 캐싱 및 동적인 함수 사용 유무를 컴포넌트마다 확인해야하는 번거로움있음
그래서 나온 라우트 세그먼트. 페이지의 동작을 강제로 설정
하지만 권장되는 방식은 아님. 이미 빌드타임때 세세하게 확인해서 Dynamic, Static 으로 변환해주고 있기 때문

export const dynamic = ""

1. auto: 기본값, 아무것도 설정 안함
2. force-dynamic: 페이지를 강제로 Dynamic 설정
3. force-static: 페이지를 강제로 Static 설정
		- 쿼리 스트링과 같은 동적 함수가 선언된 경우 쿼리값은 항상 빈값으로 설정됨
        - 즉, 항상 같은 빈 결과 페이지가 반환됨
4. error: 페이지를 강제로 Static 설정
		- 데이터 캐싱x 및 동적함수 사용된 경우 빌드 에러 발생