Next.js 15에서 Axios로 데이터 Fetching 완벽 가이드

2025-01-23 16:14:00

nextjsjavascriptaxiostypescript

Next.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