Next.js 데이터 패칭 완전 정복 4 - fetch 커스터마이징과 라우트 핸들러Complete Guide to Data Fetching in Next.js 4 - fetch Customization and Route Handlers
📅
🚀
들어가기 전에🔗
이번 파트에서는 실무에서 자주 필요한 기능인
fetch 요청의 헤더 추가
, 쿠키 전송
, 그리고 캐시 무효화 및 커스터마이징
을 다룬 뒤, Next.js의 라우트 핸들러(route handler)를 통해 API 서버처럼 작동하는 방법을 살펴봅니다.🚀
fetch 커스터마이징: 헤더와 쿠키 사용하기🔗
fetch 함수는 브라우저와 거의 동일하게 사용되지만, 서버 컴포넌트에서 사용하면 서버 환경의 특성을 살릴 수 있습니다. 예를 들어, 요청에 헤더를 추가
하거나 쿠키를 포함
할 수 있습니다.✅
예제: 헤더 추가🔗
const res = await fetch('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer my-token',
},
});이렇게 하면 인증 토큰이나 사용자 정보 등 필요한 헤더를 함께 보낼 수 있습니다.
🚀
쿠키 전달: cookies() API 사용🔗
서버 컴포넌트에서는 Next.js의 내장 API인
cookies()를 사용하여 클라이언트 쿠키에 접근할 수 있습니다. 예를 들어, 로그인한 사용자의 정보를 쿠키에서 가져와 요청에 함께 전송할 수 있습니다.import { cookies } from 'next/headers';
const cookieStore = cookies();
const token = cookieStore.get('token');
const res = await fetch('https://api.example.com/user', {
headers: {
Authorization: `Bearer ${token?.value}`,
},
});이 방식은 사용자의 인증 정보를 서버 측에서 안전하게 처리하는 데 유용합니다.
🚀
캐시 무효화: 태그 기반 전략🔗
Next.js는
fetch 요청에 태그(tag)
를 지정하여, 특정 태그에 해당하는 데이터를 손쉽게 무효화(invalidate)
할 수 있는 기능을 제공합니다.✅
예시: 태그 추가🔗
await fetch('https://api.example.com/data', {
next: {
tags: ['data'],
},
});그리고 나중에
revalidateTag('data')를 호출하여 해당 캐시를 무효화할 수 있습니다.✅
무효화 예시 (서버 액션에서)🔗
'use server';
import { revalidateTag } from 'next/cache';
export async function updateSomething() {
// 데이터 수정 로직
await revalidateTag('data'); // 'data' 태그에 해당하는 fetch 캐시 무효화
}이렇게 하면 사용자가 데이터를 변경했을 때 해당 데이터에 관련된 요청만 정확히 다시 가져오게 만들 수 있습니다.
🚀
라우트 핸들러를 이용한 API 구성🔗
Next.js는
app/api/ 디렉토리 안에 라우트 핸들러(route handlers)
를 정의하여 자체 API 서버처럼 작동할 수 있습니다.
예를 들어, 사용자 정보를 가져오는 API를 만들려면 다음과 같이 작성합니다.// app/api/user/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
const user = await res.json();
return NextResponse.json(user);
}이제
/api/user로 요청하면 JSON 데이터를 응답하는 API가 작동하게 됩니다.
라우트 핸들러는 GET, POST, PUT, DELETE 등의 메서드를 각각 함수로 구현할 수 있으며, 서버 액션과 결합하여 유용하게 사용할 수 있습니다.🚀
결론🔗
이번 파트에서는 Next.js의
fetch 요청을 커스터마이징하고, 캐시 무효화 기능을 사용하여 데이터를 유연하게 관리하는 방법을 배웠습니다. 또한, 라우트 핸들러를 통해 프론트엔드와 백엔드가 하나로 통합된 API 구조를 구현할 수 있음을 확인했습니다.
다음 파트에서는 전체 내용을 정리하며, 어떤 전략이 어떤 상황에서 유리한지 종합 정리
를 해보겠습니다.✅
더 생각해 보기🔗
- 사용자별 데이터에 따라 캐시를 분리하고 싶다면 어떻게 해야 할까요?
- API 요청 실패 시 자동 재시도나 fallback 처리 방법은 어떻게 구성할 수 있을까요?
✅