[SWR] 캐싱을 이용한 api 요청 최소화

이 시리즈에서는 기본적인 SWR의 기능을 살펴본다.

SWR에서는 useSWR 이라는 훅을 통해서 데이터를 fecth 할 수 있다. 근데 만약 동일한 key, end-point(API url)를 호출하면 캐싱을 통해 1번만 호출한다.

캐싱의 범위는 같은 컴포넌트 뿐만 아니라, 다른 컴포넌트에서 useSWR을 하더라도 동일한 효과가 작용한다. 각각 다른 컴포넌트에서 end-point를 호출하는데 그것을 캐싱해서 network 호출을 최소화 시키다니 정말 신기하다.

이러한 기능을 이용해서 SWR이 상태관리 라이브러리는 아니지만, 마치 redux의 전역 스토어와 같이 사용할 수 있는 듯 하다. 코드를 보며 기능을 좀 더 자세히 살펴보자.

useSWR(key, fetcher, options)

• /App.js

function App () {

  // 1. useSWR에 들어갈 fetcher를 먼저 선언한다. 
  // feter는 api를 호출하는 함수이다. fetch를 이용해도 되고, axios를 이용해도 된다.
  const fetcher = async (url) => {
    	const { data } = await todoApi.getTodos(url);
	    return data; // return 되는 값이 useSWR의 data 또는 error로 간다.
	  };
  
  // 2. useSWR를 작동시킨다.
  // api 요청이 성공하면 data로 return 되고, 실패하면 error로 return 된다.
  const {data, error, mutate} = useSWR("/todos", fetcher)
  
  return (
    // .. 중략
    )
}

• fetcher는 axios를 통해 instance를 생성한 것을 사용했다.
• fetcher함수를 선언하고, useSWR를 사용하는 것이 get 하는 가장 기본적인 구조다.
• useSWR 세번째 파라미터에서 option을 설정해서 더 많은 기능을 사용할 수 있다.

캐싱

위의 요청을 다른 컴포넌트에서도 요청한다면, SWR은 첫번째 요청 이후 같은 key를 가진 요청의 응답을 캐싱하여 그것을 보여준다. 즉, 같은 요청을 다시 서버로 하지 않는다.

결과

같은 요청을 App.js 라는 컴포넌트와 Child.js 라는 컴포넌트에서 요청했음에도 불구하고, swr은 App.js:8 에서만 data를 fetching하고, 동일한 key값을 요청한 Child.js에서는 캐싱된 데이터를 콘솔에 보여주었다. 아래의 이미지를 통해 fetch가 1번만 이루어진 것을 알 수 있다.

key값이 다른 경우, 각각 요청을 하여 2번의 fetch가 된 것을 볼 수 있다.