axios와 fetch, 그리고 Next는 왜 fetch 사용을 권장할까?

최근에 회사에서 Next14로 새로운 프로젝트를 시작하게 되면서, 공식문서에서 설명하고 있는 native fetch API를 확장한 fetch를 사용할지, axios 라이브러리를 사용할지에 대한 고민에 부딪히게 되었다. 맨 처음에 fetch를 사용하다가 axios를 사용하게 되었을 때, 정말 정말 편리함을 느꼈었는데, 둘 사이에 정확히 어떤 차이가 있는지 자세히 알지 못해 기술 결정을 못 내리고 있는 자신을 발견하게 되었다. 그리하여 둘 사이 차이점을 살펴보기로 했다.

Axios란 ?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

Fetch API란?

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제입니다.

 

각각 Axios 라이브러리 공식문서와 mdn에서 가져온 정의이다. 여기서 집중해서 볼 것은, axios는 웹 브라우저에서 XMLHttpRequests를 사용한다고 되어있으며, Fetch API는 XMLHttpRequest보다 강력하고 유연한 대체재라는 점이다. 그렇다면, fetch는 XMLHttpRequests를 사용하고 있는 Axios보다 더 낫다는 뜻일까?

이를 알기 위해서는 XMLHttpRequest가 정확히 무엇이고, fetch는 어떤 점에서 그보다 강력하고 유연한 대체재인지 살펴볼 필요가 있다.

XMLHttpRequest란?

Ajax 에서 사용되는 HTTP 통신을 위한 메서드와 프로퍼티를 제공하는 객체이다.

 

그렇다면 다시 질문은 Ajax가 무엇인지로 넘어가게된다.

Ajax란?

AJAX (Asynchronous JavaScript와 XML)는 XMLHttpRequest 기술을 사용해 복잡하고 동적인 웹페이지를 구성하는 프로그래밍 방식이다.

 

Ajax가 등장하기 이전까지, 즉 이름에서 알 수 있듯, 비동기적 통신 방법이 나오기 전까지는 웹 페이지에 변경사항이 있을 때에, html태그로 시작해서 html태그로 끝나는 완전한 HTML을 서버로부터 전송받아 처음부터 다시 렌더링해 주는 방식을 사용했었다.

 

이럴 경우 다음과 같은 단점이 있었다.

 

1) 변경할 필요 없는 부분까지 다시 받아야 하는 불필요한 데이터 통신이 발생했고,
2) 처음부터 다시 렌더링이 일어나기 때문에 화면이 순간적으로 깜빡이는 현상이 발생했으며

3) 비동기가 아닌 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리가 블로킹된다.

 

Ajax가 등장함으로써 이 패러다임을 획기적으로 전환했다.

 

1) 갱신이 필요한 데이터만 전송받기 때문에 불필요한 데이터 통신이 발생하지 않고,

2) 전체를 다시 렌더링하지 않고, 필요한 부분만 재렌더링하기 때문에 깜빡임 현상이 발생하지 않으며,

3) 클라이언트 서버간의 통신이 비동기적으로 발생하기 때문에 서버에 요청을 보낸 이후 블로킹이 발생하지 않게 되었다.

 

XMLHttpRequest는 다음과 같은 방식으로 사용한다.

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체의 생성

xhr.open('GET', '/users'); // HTTP 요청 초기화

xhr.setRequestHeader('content-type', 'application/json'); // HTTP 요청 헤더 설정

xhr.send(); // HTTP 요청 전송

// POST 통신 (몸체가 있을 경우 다음과 같이 직렬화 하여 전송)

xhr.open('POST', '/users');
xhr.setRequestHeader('content-type', 'application/json'); // HTTP 요청 헤더 설정
xhr.send(JSON.stringify({id:1, content: 'HTML', completed: false}); 

fetch API와 가장 두드러지는 XMLHttpRequest의 차이는 여기라고 생각하는데, HTTP 응답 처리시 XMLHttpRequest는 이 객체가 발생시키는 이벤트를 캐치한다.(즉 callback을 활용한다.) XMLHttpRequest는 onreadystatechange, onload, onerror같은 이벤트 핸들러 프로퍼티를 갖는데, 이 중에서 HRRP 요청의 현재 상태를 나타내는 readyState 프로퍼티 값이 변경된 경우 발생하는readystatechange 이벤트를 캐치하여 다음과 같이 HTTP 응답을 처리할 수 있다.

 

 

위처럼 xhr 객체를 만든 후, 아래처럼 요청을 보낸 후 응답을 받아보았다.

 

 

readyState가 1에서 DONE 상태인 4로 바뀌었고, status 값이 200으로 변했으며 response에 값이 들어온 것을 볼 수 있다.

 

 

최종적으로 다음과 같이 status 분기처리를 통해 값을 가져올 수 있다. 혹은 HTTP 요청이 성공적으로 완료된 경우만 발생하는 onload 이벤트를 통해 응답을 가져올 수 있다.

xhr.onload = () => {
      if(xhr.status ===200){
        console.log(JSON.parse(xhr.response));
      }else{
           console.error('Error', xhr.status, xhr.statusText)
      }
};

 

위와 같이 onload 메서드에 다음과 같은 콜백을 달아두고 요청을 보내자, 응답이 완료되는 대로 내가 원하는 콜백이 실행되었다.

Ajax 통신을 할 수 있게 된 것은 좋지만, 뭔가 번거롭다. 그렇게 Fetch API가 등장했다.

 

 

그렇다면 다시,

Fetch API는 XMLHttpRequest보다 무엇이 더 좋은가?

1. 간결하고 단순한 문법
2. Promise를 리턴하기 때문에 callback을 활용하지 않아도 되며, 프로미스 체이닝을 통해 비동기 응답을 더 직관적으로 처리할 수 있게 해준다.
3. Headers, Request, Response를 더 구체적으로 설정할 수 있다.

Request

const request = new Request('https://jsonplaceholder.typicode.com/users')

console.log(request.url) // https://jsonplaceholder.typicode.com/users
console.log(request.method) // GET (HTTP method)
console.log(request.credentials) // same-origin
Response

const res = await fetch(request)

console.log(res.ok) // true (boolean)
console.log(res.status) // 200  (HTTP status)
console.log(res.url) // https://jsonplaceholder.typicode.com/users

const json = await res.json() // 본문을 JSON으로 구문 분석
const text = await res.text() // 본문을 텍스트로 구문 분석
const formData = await res.formData() // 본문의 폼데이터 표현
Header

const headers = new Headers()
headers.append('Content-Type', 'text/xml')

const request = new Request('https://jsonplaceholder.typicode.com/users', { headers })

const res = await fetch(request)
console.log(res.headers.get('Content-Type')) // application/json; charset=UTF-8

 

이러한 주요 차이점들이 있지만, nextjs에서 굳이 fetch를 사용하게 된 것은 caching에 대한 제어를 더 모던하고 간결한 방식으로 할 수 있기 때문이다.

 

그렇다면 추가로, XMLHttpRequest와 fetch API의 캐싱 방식을 알아보자.

XMLHttpRequest의 캐싱 방식

헤더에 다음과 같은 방식으로 캐싱에 대한 옵션들을 달 수 있다.

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Pragma", "no-cache");

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // Handle the response
  }
};

xhr.send();

fetch API의 캐싱 방식

Request 객체의 cache 프로퍼티를 활용하면 되며, XMLHttpRequest보다 훨씬 폭넓은 옵션을 제공한다.

• default : 브라우저는 HTTP 캐시에서 일치하는 요청을 찾는다.
      - 일치하는 항목이 있고, 새 항목인 경우 캐시에서 반환
      - 일치하는 항목이 있고, 오래된 항목이면 브라우저는 원격 서버에 조건부 요청을 함, 서버가 리소스가 변경되지 않았다고 표시하. 면, 캐시에서 리소스 반환, 변경되었다면 리소스가 서버에서 다운로드되고 캐시가 업데이트 됨.
      - 일치하는 항목이 없으면, 브라우저는 정상 요청 후 다운로드된 리소스로 캐시를 업데이트함.
• no-store : 브라우저는 캐시를 살펴보지 않고 원격 서버에서 리소스를 가져오며, 다운로드된 리소스로 캐시를 업데이트하지 않음.
• reload : 브라우저는 캐시를 살펴보지 않고 원격 서버에서 리소스를 가져오며, 다운로드 된 리소르로 캐시를 업데이트 함.
• no-cache : 브라우저는 HTTP 캐시에서 일치하는 요청을 찾음. 새 요청이든 오래된 요청이든 일치하는 항목이 있으면 브라우저는 원격 서버에 조건부 요청을 보냄. 서버가 리소스 변경이 되지 않았다고 하면 캐시에서 리소스가 반환됨. 변경이 되었다면 리소스가 서버에서 다운로드되고 캐시가 업데이트 됨. 

 

코드로 살펴보면 다음과 같이 cache 프로퍼티에 원하는 옵션을 넣어주기만 하면 된다.

fetch("https://example.com/api/data", {
  method: "GET",
  cache: "no-cache" // Specify caching behavior
})
  .then(function (response) {
    if (response.ok) {
      // Handle the response
    }
  })
  .catch(function (error) {
    // Handle errors
  });

 

바로 이런 캐싱 옵션들 때문에 NextJs는 fetch API를 확장해서 사용하고 있는 것 같다. 그렇다면 Axios에도 이런 캐싱 처리를 할 수 있는 기능들이 있을까? 아니! 없다!! Axios는 정의에서도 써있듯, 브라우저에서는 XMLHttpRequest를 사용하기 때문이다. 따라서 이러한 상세 캐싱 옵션들을 처리해주기 위해서는 별도의 패키지 설치가 필요하다.

 

 

그렇다면 그 동안 우리는 어떤 이점때문에 Axios를 사용하고 있었을까?

• 기본적으로 데이터를 별도 serialize, deserialize 할 필요가 없이 객체 형태로 바로 사용할 수 있다.
• baseUrl을 설정할 수 있다.
• default header를 설정할 수 있다.
• request, response interceptor를 활용할 수 있다.

위 기능들은 fetch API가 해줄 수 없는 것들이기에, 다음과 같이 axios 라이브러리를 활용하여 axiosClient를 만든 후 이를 사용하고 있었다.

 

// axios.ts

import axios, { AxiosRequestConfig, AxiosError, AxiosHeaders } from 'axios';

const axiosClient = axios.create({

baseURL: 'http://localhost:8080',

timeout: 8000,

headers: {

// eslint-disable-next-line @typescript-eslint/naming-convention

'Content-type': 'application/json',

},

});

axiosClient.interceptors.request.use(

(config: AxiosRequestConfig) => {

if (config.headers === undefined) {

config.headers = {};

}

const token = localStorage.getItem('token');

if (token) {

(config.headers as AxiosHeaders).set('Authorization', token);

}

return config;

},

(error: AxiosError) => Promise.reject(error),

);

export default axiosClient;

 

 

 

그러나 공부를 해보니, 캐싱 기능들 때문에 공식문서가 fetch 사용을 권장하고 있는 것을 이해하게 되었다.

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch

 

그렇다면, 어떻게 하면 새로운 프로젝트에서 내가 axios에서 누렸던 이점들을 fetch를 사용하면서도 누릴 수 있을까? 이 부분은 해결한 후 이어서 글을 써보기로 한다.

 

 

참고

https://dawonny.tistory.com/286

https://blog.deercorp.com/next-js-app-router-and-fetch-library/

https://developer.mozilla.org/ko/docs/Web/API/Request/cache

모던 자바스크립트 Deep Dive

Request: cache 속성 - Web API | MDN

Next.js App Router로 제품 만들기: 이제 더 이상 Axios를 쓰지 않기로 했습니다

[React] Ajax, Axios, Fetch (feat. Axios 사용법)