Next.js 15에서 Axios로 데이터 Fetching 완벽 가이드
2025-01-23 16:14:00Next.js 15에서 Axios를 통한 데이터 Fetching의 중요성
Next.js 15는 각기 다른 렌더링 특성을 지닌 서버 컴포넌트와 클라이언트 컴포넌트를 도입하여 데이터 Fetching의 유연성을 크게 강화했습니다. 이 글에서는 Axios를 사용하여 이 두 컴포넌트에서 데이터를 Fetching하는 방법과 최적의 실천 방안을 제시합니다.
서버 컴포넌트와 클라이언트 컴포넌트 비교
서버 컴포넌트의 특징
- 렌더링 위치: 서버에서 렌더링을 완료한 후 HTML을 클라이언트에 전달.
- SEO 효과: 데이터가 초기 HTML에 포함되어 검색 엔진 최적화에 유리.
- 소스 코드에서의 가시성: 데이터가 HTML 소스에 보임.
- 반응성: 주로 정적 데이터용으로 설계되어 반응성이 없음.
클라이언트 컴포넌트의 특징
- 렌더링 위치: 페이지 로드 후 브라우저에서 렌더링.
- SEO 효과: 초기 HTML에 데이터가 포함되지 않아 SEO에 비우호적.
- 소스 코드에서의 가시성: 데이터가 동적으로 Fetching되어 소스에서는 보이지 않음.
- 반응성: 사용자 인터렉션에 따라 데이터를 재활용할 수 있어서 반응적인 UI에 적합함.
서버 컴포넌트에서 Axios 사용 예제
서버 컴포넌트에서 Axios를 사용하여 데이터를 Fetching하면, 데이터는 서버에서 렌더링되며 페이지 소스 코드에 그대로 포함되므로 SEO에 큰 이점을 제공합니다.
// app/server-component-example/page.tsx
import axios from 'axios';
type Post = {
id: number;
title: string;
body: string;
};
async function fetchPosts(): Promise<Post[]> {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
return response.data;
}
export default async function ServerComponentExample() {
const posts = await fetchPosts();
return (
<div>
<h1>Server-Fetched Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
서버 컴포넌트 사용 시 주의점
- SEO 최적화: 서버에서 Fetching한 데이터를 통해 검색 엔진에 최적화된 페이지를 제공할 수 있습니다.
- 데이터 가시성: 소스 코드 검사를 통해 데이터를 확인할 수 있습니다.
- 정적 데이터에 적합: 빈번한 업데이트가 필요 없는 SEO 중요 데이터를 처리하는 데 최적입니다.
클라이언트 컴포넌트에서 Axios 사용 예제
클라이언트 컴포넌트는 사용자의 상호 작용에 반응하여 데이터를 Fetching하고, 동적 콘텐츠 업데이트를 가능하게 합니다.
'use client';
import axios from 'axios';
import { useEffect, useState } from 'react';
type Post = {
id: number;
title: string;
body: string;
};
export default function ClientComponentExample() {
const [posts, setPosts] = useState<Post[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchPosts() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
setPosts(response.data);
} catch (error) {
console.error('Error fetching posts:', error);
} finally {
setLoading(false);
}
}
fetchPosts();
}, []);
if (loading) return <div>Loading...</div>;
return (
<div>
<h1>Client-Fetched Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
클라이언트 컴포넌트 사용 시 주의점
- SEO 비우호적: 초기 HTML에 데이터가 포함되지 않으므로 검색 엔진 최적화에는 부족합니다.
- 데이터 시각화의 비가시성: 소스 코드 검사 시 데이터는 보이지 않습니다.
- 동적 데이터에 적합: 자주 업데이트되거나 사용자 인터랙션 중심의 데이터 처리에 유리합니다.
서버 vs. 클라이언트 데이터 Fetching의 적용 시점
- SEO가 중요한 데이터: 서버 컴포넌트를 활용
- 사용자 특정 데이터 또는 동적 데이터: 클라이언트 컴포넌트를 활용
- 빈번하게 갱신되는 데이터: 클라이언트 컴포넌트를 활용
- 정적이고 잘 변하지 않는 데이터: 서버 컴포넌트를 활용
Axios 사용의 Best Practices
-
에러 처리의 중요성: Axios 호출은 항상 try-catch로 감싸 에러를 처리하십시오.
try { // Axios 호출 } catch (error) { console.error('데이터 페칭 도중 에러 발생:', error); } -
SEO 최적화 고려: SEO에 영향을 미치는 데이터는 서버 컴포넌트를 사용합니다. 클라이언트 컴포넌트는 SEO가 중요하지 않은 데이터를 다룹니다.
-
불필요한 요청 줄이기: 중복된 액시오스 요청을 피하고, React Query나 SWR 같은 라이브러리로 데이터 캐시와 동기화를 단순화하십시오.
-
보안 유의사항: 클라이언트에서 Fetching할 때 민감 정보를 노출되지 않도록 주의합니다.
결론
Next.js 15에서 Axios를 활용한 데이터 Fetching은 명확하게 구분된 서버 및 클라이언트 컴포넌트 덕분에 쉬워졌습니다. 서버 컴포넌트는 정적이며 SEO가 중요한 데이터를 맞추고, 클라이언트 컴포넌트는 동적이며 사용자 특정 데이터를 처리하는 데 적합합니다. 에러를 항상 우아하게 처리하고, 성능과 보안을 염두에 둔다면 높은 효율을 발휘할 수 있습니다.
참고링크
- Next.js 공식 문서: https://nextjs.org/docs
- Axios 공식 문서: https://axios-http.com