Next.js 15에서 Fetch와 Axios: 뭘 써야 할까?

Next.js 15부터는 데이터 패칭과 관련된 중요한 변화가 있었습니다. 특히 fetch의 기본 동작과 캐싱 메커니즘이 변화하면서, 많은 개발자들이 fetch를 써야 해? 아니면 여전히axios 가 좋아?”라고 고민하게 되었죠. 이번 글에서는 그래서 이번 글에서는 Fetch와 Axios의 차이, Next.js 15에서 어떤 방식을 권장하는지, 코드 예제를 통해 보여드리겠습니다.

---

HTTP 요청 간단 정리

먼저, HTTP 요청을 짧게 설명하면 HTTP 요청은 리소스에 액세스하기 위해 서버로 전송되는 메시지입니다.

• GET : fetch()지정된 리소스에서 데이터를 요청합니다. 데이터에 영향을 미쳐서는 안 됩니다. (ex: 블로그 글 보기)
• POST : 처리할 데이터를 지정된 리소스에 제출하는데, 이는 종종 서버의 상태를 변경하거나 부작용을 일으킵니다. (ex: 댓글 작성)
• PUT : 대상 리소스의 모든 현재 표현을 업로드된 콘텐츠로 바꿉니다. (ex: 프로필 수정)
• DELETE : 지정된 리소스를 제거합니다. (ex: 게시물 삭제)
• HEAD : GET과 비슷하지만 지정된 리소스의 본문이 아닌 헤더만 요청합니다.
• PATCH : 리소스에 부분적인 수정 사항을 적용합니다.

HTTP 응답은 상태 줄(http 상태 코드와 짧은 설명 포함), 헤더, 그리고 때로는 본문으로 구성됩니다. 상태 코드는 요청 결과에 대한 정보를 제공합니다. 일반적인 상태 코드는 다음과 같습니다.

• 200 OK : 요청이 성공했습니다.
• 301 영구적으로 이동됨 : 리소스가 새 URL로 영구적으로 이동되었습니다.
• 400 잘못된 요청 : 구문이 잘못되어 요청을 처리할 수 없습니다.
• 401 인증되지 않음 : 리소스에 액세스하려면 인증이 필요합니다.
• 404 찾을 수 없음 : 요청한 리소스를 찾을 수 없습니다.
• 500 내부 서버 오류 : 서버에서 예상치 못한 상황이 발생했을 때 나타나는 일반적인 오류 메시지입니다.

HTTP 요청을 할 때 성공적인 응답 가능성뿐만 아니라 잠재적인 오류도 고려하는 것이 좋습니다.

이제 HTTP 요청, 유형, 구성 요소, 예상 응답에 대해 이해했으므로 이 글의 본론으로 넘어가서 이러한 요청을 처리하기 위한 두 가지 인기 있는 NodeJS 도구를 비교해 보겠습니다.

---

Fetch와 Axios의 차이

Fetch는 브라우저의 내장 API로, 네이티브로 제공되며 Next.js 15에서는 기본적으로 fetch가 더 권장됩니다.

• ✅ 브라우저 및 Node.js 내장
• ✅ Next.js 15의 새로운 캐싱 메커니즘과 호환
• ✅ 심플하고 직관적인 API
• ❗ 인터셉터, 에러 핸들링 기능, 자동 JSON 변환 등의 고급 기능 부족

Axios는 HTTP 클라이언트 라이브러리로, Node.js 및 브라우저 환경에서 사용 가능합니다.

• ✅ 직관적인 API (JSON 자동 변환, 인터셉터 지원)
• ✅ 오류 핸들링, 리퀘스트/리스폰스 변환 기능 제공
• ❗ Next.js 15의 캐싱 기능과 완벽하게 호환되지 않을 수 있음
• ❗ 외부 라이브러리 추가 필요

---

Next.js 15의 Fetch 변화

Next.js 15에서는 fetch의 기본 캐싱 동작이 변경되었습니다.

• 기본적으로 fetch는 no-store(캐싱 비활성화)로 동작
• 캐싱을 활성화하려면 cache: 'force-cache' 또는 next: { revalidate: 시간 } 옵션을 명시적으로 설정해야 합니다.

코드 예제

Fetch 사용 예제 (권장)

// app/page.tsx
export default async function Home() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        cache: 'force-cache'
    });
    const data = await response.json();

    return (
        <div>
            {data.map((post: any) => (
                <p key={post.id}>{post.title}</p>
            ))}
        </div>
    );
}

Axios 사용 예제

import axios from 'axios';

export default async function Home() {
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');

    return (
        <div>
            {data.map((post: any) => (
                <p key={post.id}>{post.title}</p>
            ))}
        </div>
    );
}

cache: 'force-cache'란 무엇일까?

cache: 'force-cache'는 fetch를 사용할 때 데이터를 캐싱하도록 지정하는 옵션입니다. 사용 시, 동일한 요청이 반복될 경우 네트워크를 재요청하지 않고, 기존에 캐싱된 데이터를 반환합니다.

성능 차이:

• 장점: 더 빠른 로딩 속도, 네트워크 부하 감소
• 단점: 실시간 데이터가 필요할 경우 데이터가 오래된 상태일 수 있음

실시간 데이터가 필요하다면 cache: 'no-store'를 사용하는 것이 적합합니다.

---

그럼, 뭘 써야 할까?

• Next.js의 새로운 기능을 활용하려면 → fetch!
• 데이터를 간단하게 불러오기 → fetch!
• 복잡한 데이터 처리와 에러 핸들링 → axios!

결론

Next.js 15에서는 fetch를 사용하는 것이 더 권장되며, 특히 새로운 캐싱 및 데이터 패칭 메커니즘과 긴밀하게 통합되어 있습니다. 다만, 프로젝트에 따라 axios가 제공하는 강력한 기능을 활용해야 하는 경우도 있으니, 필요에 맞춰 사용 방식을 결정하는 것이 중요합니다.