Next.js 데이터 페칭 패턴
App Router에서의 다양한 데이터 페칭 방법과 캐싱 전략을 알아봅니다.
서버 컴포넌트에서 데이터 페칭
Next.js App Router에서는 서버 컴포넌트에서 직접 async/await를 사용할 수 있습니다.
async function PostList() {
const posts = await fetch('https://api.example.com/posts').then(
(res) => res.json()
);
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}캐싱 전략
기본 캐싱 (Static)
// 기본적으로 캐시됨
const data = await fetch('https://api.example.com/data');재검증 (Revalidate)
// 1시간마다 재검증
const data = await fetch('https://api.example.com/data', {
next: { revalidate: 3600 },
});캐시 비활성화
// 매 요청마다 새로운 데이터
const data = await fetch('https://api.example.com/data', {
cache: 'no-store',
});병렬 데이터 페칭
여러 데이터를 동시에 가져올 때는 Promise.all을 사용합니다:
async function Dashboard() {
const [user, posts, comments] = await Promise.all([
getUser(),
getPosts(),
getComments(),
]);
return (
<div>
<UserProfile user={user} />
<PostList posts={posts} />
<CommentList comments={comments} />
</div>
);
}Server Actions
폼 제출이나 데이터 변경은 Server Actions를 사용합니다:
'use server';
export async function createPost(formData: FormData) {
const title = formData.get('title');
const content = formData.get('content');
await db.posts.create({ title, content });
revalidatePath('/posts');
}마무리
Next.js의 데이터 페칭은 간단하면서도 강력합니다. 적절한 캐싱 전략을 선택하여 성능을 최적화하세요.