[Next.js] useSWR + axios로 비동기로 데이터 가져오기

본 글은 Next.js에서 useSWR와 axios를 사용해 서버에 비동기로 데이터를 가져오는 방법을 다룬 내용입니다. 

 

목차

useSWR

axios

사용해보기 

 

useSWR

데이터 페칭을 위한 Hook으로 데이터 요청과 캐싱을 쉽게 관리할 수 있도록 해준다.

 

이전 데이터를 유지하면서 백그라운드에서 새로운 데이터를 가져와 업데이트 하는 방식이다.

 

기본 형태는 아래와 같다. 

// 0. 설치
yarn add swr

// 1. import 
import useSWR from 'swr';
 
// 2. 선언 (key: '/api/user', 데이터 가져오는 함수: fetcher)
const { data, error, isLoading } = useSWR('/api/user', fetcher);

 

(필수 값은 색깔로 표시)

파라미터

• key
  • 데이터를 식별하는 고유한 문자열 또는 함수
  • 일반적으로 API 엔드포인트 URL
• fetcher
  • 데이터를 가져오는 함수
  • key를 인자로 받아 데이터를 페칭
  • 주로 Axios, Fetch API 등을 사용
• options
  • refreshInterval: 데이터 갱신 주기 설정, 밀리초 단위로 설정하여 지정한 간격으로 데이터를 자동으로 갱신
  • refreshOnFocus: 브라우저 창이 포커스를 받을 때 데이터를 재검증 (기본 값: true)
  • revaliddateOnReconnect: 네트워크가 재연결될 때 데이터를 재검증 (기본 값: true)
  • dedupingInterval: 동일 키로 중복된 요청을 방지하기 위한 간격 설정 (기본 값: 2000ms)
  • focusThrottleInterval: 포커스가 여러 번 변경될 때 재검증 간격 설정 (기본 값: 5000ms)
  • initialData: 초기 데이터 설정, 서버 사이드 렌더링 또는 정적 사이트 생성 시 사용
  • onSuccess: 데이터 페칭이 성공했을 때 호출되는 콜백 함수
  • onError: 데이터 페칭이 실패했을 때 호출되는 콜백 함수
  • revalidateIfStale: 데이터가 오래된 경우 컴포넌트가 마운트될 때 데이터를 재검증 (기본 값: true)
  • revalidateOnMount: 컴포넌트가 마운트될 때 무조건 데이터 재검증 (기본 값: true)
  • fallbackData: initialData와 유사, 컴포넌트가 처음 마운트될 때만 사용, 이후에는 캐시된 데이터가 우선 사용

 

장점

1. 자동 재검증
   • 설정한 간격으로 데이터를 자동 갱신
2. 로컬 캐싱
   • 데이터가 캐시에 저장되어 다음 요청 시 자동으로 갱신
     
     • 고유한 키로 데이터 요청을 식별
     • 브라우저 메모리에 저장
     • 휘발성 캐시라서 빠른 접근 속도를 가지지만, 페이지를 떠나거나 리프레시할 때 초기화 됨
3. 포커스 리밸리데이션
   • 브라우저 창에 다시 포커스가 돌아오면 자동으로 데이터를 갱신
4. 오프라인 지원
   • 네트워크 미연결 시에도 캐시된 데이터 사용, 재연결 시 데이터를 갱신

 

단점

1. 초기 로딩 시간
2. 캐시 관리
   • 캐싱이 자동으로 이루어지지만, 캐시 정책을 세밀하게 어려운 경우 데이터 갱신 주기나 캐시 무효화 로직 등의 추가 설정 필요

 

자세한 내용은 공식 문서를 참고하면 좋을 거 같다.

 

axios

axios는 예전에 짧게 다뤄본 적이 있는 내용인데 이번 기회에 한번 더 공부해봤다. 

 

이전 글: https://hani-develop-history.tistory.com/82

[React] fetch와 axios

 

axios는 브라우저와 Node.js 환경에서 모두 동작하는 HTTP 클라이언트이다. 

주로 API 요청을 보내기위 위해 사용된다.

axios는 여러가지 장점이 있는데 그 중 내가 좋다고 느꼈던 점은 아래와 같다.

 

1. 간단한 API
   • .get(), post(), put() 등 간편한 메서드 제공해 HTTP 요청을 쉽게 보낼 수 있음
2. Promise 기반
   • 비동기 작업을 간편하게 처리할 수 있음
3. 인터셉터
   • 요청과 응답을 가로채어 인증 토큰 추가 등 여러 가지 작업 수행 가능 (예: 리프레시 토큰)
4. 자동 변환
   • 자동 변환을 지원 (JSON)

 

사용해보기

자, 이제 axios와 useSWR을 사용해 비동기로 데이터를 가져오는 코드를 작성해봤다. 

import useSWR from 'swr';

const fetchFn = async (userType: string) => {
    try {
		const res = await instance.get(`/${userType}/user`);
		return res.data.data;

    } catch (error) {
    	throw error;
    }
};

// 특정 데이터가 있어야 할 때
const { data } = useSWR(() => userType ? `/${userType}/user` : null, () => fetchFn(userType));

// 상관 없을 때
const { data } = useSWR('/user` : null', () => fetchFn());

return (
	<div>
    	{data}
	</div>
);

 

 

마무리

원래는 axios + react-query를 사용해 비동기 방식으로 데이터를 가져왔었는데, 이번 프로젝트에서 처음으로 useSWR을 사용해봤다! ㅎㅎ

 

내가 useSWR을 사용한 이유는 3가지가 있다.

• Next.js를 사용하고 있어 vercel에서 관리하는 useSWR이 프로젝트에 조금 더 적합하다고 판단
• 초기 설정이 간단
• 간단한 데이처 페칭과 캐싱이 필요했음

 

아래 내용을 확인해보고 각자 상황에 맞는 것을 사용하면 될 거 같다! :) 

 

useSWR은 간단한 데이터 페칭과 캐싱이 필요한 경우 적합,

React Query는 복잡한 데이터 페칭 및 상태 관리가 필요한 경우 적합