Fetching Data with Axios in Next.js 15 (Next.js 15에서 Axios로 데이터 가져오기)

Next.js 15에서 데이터 가져오기는 서버 컴포넌트와 클라이언트 컴포넌트 모두에서 수행 가능하며, 동작, 성능, SEO 영향 측면에서 뚜렷한 차이를 보인다. Axios는 단순성과 유연성으로 인해 데이터 가져오기에 인기 있는 선택지이다. 이 가이드에서는 서버 및 클라이언트 컴포넌트에서 Axios를 사용하는 방법, 둘 간의 차이점, 그리고 모범 사례를 설명한다.

Image description

서버 및 클라이언트 컴포넌트 주요 차이점

측면	서버 컴포넌트	클라이언트 컴포넌트
렌더링 위치	클라이언트에 HTML을 전송하기 전 서버에서.	페이지 로드 후 브라우저에서.
SEO 영향	SEO 친화적이며, 데이터가 초기 HTML에 포함됨.	클라이언트 측에서 데이터를 가져오므로 SEO 친화적이지 않음.
`view-source`의 데이터	HTML 소스에서 데이터 확인 가능.	데이터는 동적으로 가져오며 소스에서 확인 불가.
반응성	반응적이지 않음; 정적 데이터에 적합.	반응적이며; 대화형 UI 요소에 적합.

서버 컴포넌트에서 Axios 사용

예시: 서버 컴포넌트에서 데이터 가져오기

서버 컴포넌트는 서버 렌더링 프로세스 중에 데이터를 가져온다. 이는 브라우저로 전송되는 HTML에 데이터가 포함되도록 보장하여 SEO를 개선한다.

// app/server-component-example/page.tsx
import axios from 'axios';

type Post = {
  id: number;
  title: string;
  body: string;
};

async function fetchPosts(): Promise {
  const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return response.data;
}

export default async function ServerComponentExample() {
  const posts = await fetchPosts();

  return (
    
      Server-Fetched Posts

      
        {posts.map((post) => (
          {post.title}

        ))}
      

    

  );
}

주요 사항

SEO: 서버에서 가져온 데이터는 초기 HTML에 포함되어 검색 엔진에 노출되고 SEO를 개선한다.
소스 코드 가시성: 데이터는 브라우저의 view-source에서 확인할 수 있다.
최적 사용 사례: 빈번한 업데이트나 상호작용이 필요 없는 정적 또는 SEO에 중요한 데이터.

클라이언트 컴포넌트에서 Axios 사용

예시: 클라이언트 컴포넌트에서 데이터 가져오기

클라이언트 컴포넌트는 페이지가 브라우저에 로드된 후 데이터를 가져온다. 이는 SEO 친화적이지 않지만 동적이고 상호작용적인 업데이트를 가능하게 한다.

'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([]);
  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 Loading...
;

  return (
    
      Client-Fetched Posts

      
        {posts.map((post) => (
          {post.title}

        ))}
      

    

  );
}

주요 사항

SEO: 데이터가 초기 HTML의 일부가 아니므로 SEO를 개선하지 않는다.
소스 코드 가시성: 데이터는 view-source에서 확인할 수 없다.
반응성: 빈번하게 변경되거나 사용자 상호작용에 의존하는 동적 콘텐츠에 적합하다.

서버 vs. 클라이언트 데이터 가져오기 사용 시점

사용 사례	권장 컴포넌트
SEO에 중요한 데이터 (예: 블로그 게시물)	서버 컴포넌트
사용자별 또는 동적 데이터	클라이언트 컴포넌트
자주 업데이트되는 데이터	클라이언트 컴포넌트
정적이며 거의 변경되지 않는 데이터	서버 컴포넌트

Next.js 15에서 Axios 사용 모범 사례

1. 항상 오류를 적절하게 처리

Axios 호출을 try-catch 블록으로 감싸 오류를 효과적으로 처리한다.

2. SEO 최적화

SEO에 영향을 미치는 데이터에는 서버 컴포넌트를 사용한다. 검색 엔진 색인이 필요 없는 데이터에는 클라이언트 컴포넌트를 사용해야 한다.

3. 중복 데이터 가져오기 감소

컴포넌트 간 Axios 호출 중복을 피한다. 대신 React Query 또는 SWR과 같은 데이터 가져오기 라이브러리를 사용하여 캐싱 및 동기화를 고려한다.

4. 보안 고려 사항

클라이언트 측에서 데이터를 가져올 때 Axios 호출에 민감한 정보가 노출되지 않도록 주의한다. 이 데이터는 브라우저에서 검사될 수 있다.

데이터 가져오기의 SEO 영향

서버 컴포넌트: 클라이언트로 전송되는 HTML에 데이터를 포함하여 SEO를 개선한다. 이는 검색 엔진 크롤러가 콘텐츠에 접근할 수 있도록 한다.
클라이언트 컴포넌트: 데이터가 동적으로 가져와지고 초기 HTML에 포함되지 않으므로 SEO를 개선하지 않는다.

결론

Next.js 15에서 Axios를 사용하여 데이터를 가져오는 것은 서버 컴포넌트와 클라이언트 컴포넌트 간의 명확한 분리 덕분에 간단하고 유연하다. 차이점과 모범 사례를 이해함으로써 동적이고 상호작용적인 경험을 제공하면서도 성능이 우수하고 SEO 친화적인 애플리케이션을 만들 수 있다.

정적이며 SEO에 중요한 데이터에는 서버 컴포넌트를 사용하고, 동적 또는 사용자별 데이터에는 클라이언트 컴포넌트를 사용한다. 항상 오류를 적절하게 처리하고 애플리케이션의 성능 및 보안에 유의해야 한다.

HiClover

이 블로그 검색