SWR

SWR이란?

The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

React Hooks for Data Fetching - SWR

즉, cache로부터 받아온 데이터를 먼저 리턴하고 그 다음에 fetch를 통해 업데이트된 데이터를 리턴하는 형식입니다.

이러한 로직을 통해 사용자에게 조금 더 좋은 UX를 제공합니다.

API 옵션

const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)

파라미터

• key: 요청을 위한 고유한 키 문자열(또는 함수 / 배열 / null)
• fetcher: (옵션) 데이터를 가져오기 위한 함수를 반환하는 Promise
• options: (옵션) SWR hook을 위한 옵션 객체

반환 값

• data: fetcher가 이행한 주어진 키에 대한 데이터(로드되지 않았다면 undefined)
• error: fetcher가 던진 에러(또는 undefined)
• isValidating: 요청이나 갱신 로딩의 여부
• mutate(data?, shouldRevalidate?): 캐시 된 데이터를 뮤테이트하기 위한 함수

옵션

• fetcher(args): fetcher 함수
• revalidateOnFocus = true: 창이 포커싱되었을 때 자동
• revalidateOnReconnect = true: 브라우저가 네트워크 연결을 다시 얻었을 때 자동으로 갱신(navigator.onLine을 통해)
• refreshInterval = 0: 인터벌 폴링(기본적으로는 비활성화)
• refreshWhenHidden = false: 창이 보이지 않을 때 폴링(refreshInterval이 활성화된 경우)
• refreshWhenOffline = false: 브라우저가 오프라인일 때 폴링(navigator.onLine에 의해 결정됨)
• shouldRetryOnError = true: fetcher에 에러가 있을 때 재시도
• dedupingInterval = 2000: 이 시간 범위내에 동일 키를 사용하는 요청 중복 제거
• focusThrottleInterval = 5000: 이 시간 범위 동안 단 한 번만 갱신
• errorRetryInterval = 5000: 에러 재시도 인터벌
• errorRetryCount: 최대 에러 재시도
• 기타 등등.... 더 많다.

데이터 가져오기

첫번째 인자는 key에 대한 항목으로 두번째 인자인 fetcher에게 전달되는 인자로 사용되는 것과 동시에 SWR 요청의 구분 인자로도 사용됩니다. 보통 URL와 같은 내용을 전달합니다.

두번째 인자는 fetcher에 대한 항목으로 Data를 Fetch하는 기능입니다. 보통 fetch나 axios를 사용합니다.

예제

const fetcher = url => fetch(url).then(r => r.json())

function App () {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}

두번째 인자인 fetcher가 데이터를 로드하면 해당 응답이 data로 세팅되고, 오류 발생 시 error로 세팅됩니다.

자동 갱신

포커스 시에 갱신하기

SWR은 페이지에 다시 포커스하거나 탭을 전환할 때, 자동으로 데이터를 갱신합니다.

SWR의 revalidateOnFocus 옵션을 통해 가능하며, 기본적으로 활성화되어 있습니다.

인터벌 시에 갱신하기

SWR의 refreshInterval을 이용하여 매 시간마다 데이터를 업데이트를 할 수 있습니다.

useSWR('/api/todos', fetcher, { refreshInterval: 1000 }) // 1초마다 업데이트

페이지네이션 및 인피니티 로딩

기존의 SWR의 useSWR을 사용하여 페이지네이션 및 인피니티 로딩을 구현할 수 있지만, SWR에서 제공해주는 useSWRInfinite Hook을 이용하여 구현하는 방법을 알아보고자 합니다.

API

• getKey: 인덱스와 이전 페이지 데이터를 받고 페이지의 키를 반환하는 함수
• fetcher: useSWR의 fetcher함수와 동일
• options: useSWR이 지원하는 모든 옵션을 받음. 세 개의 추가 옵션을 포함:
  • initialSize = 1: 초기에 로드해야 하는 페이지의 수
  • revalidateAll = false: 항상 모든 페이지의 갱신 시도
  • persistSize = false: 첫 페이지의 키가 변경될 때, 페이지 크기를 1(initialSize가 설정된 경우 initialSize)로 초기화하지 않음

반환 값

• data: 각 페이지의 가져오기 응답 값의 배열
• error: useSWR의 error와 동일
• isValidating: useSWR의 isValidating과 동일
• mutate: useSWR의 바인딩 된 뮤테이트 함수와 동일하지만 데이터 배열을 다룸
• size: 가져올 페이지 및 반환될 페이지의 수
• setSize: 가져와야 하는 페이지의 수를 설정

const getKey = (pageIndex, previousPageData) => {
  if (previousPageData && !previousPageData.length) return null // 끝에 도달
  return `/users?page=${pageIndex}&limit=10`                    // SWR 키
}

function App () {
  const { data, size, setSize } = useSWRInfinite(getKey, fetcher)
  if (!data) return 'loading'

  return <div>
    {data.map((users, index) => {
      // `data`는 각 페이지의 API 응답 배열입니다.
      return users.map(user => <div key={user.id}>{user.name}</div>)
    })}
    <button onClick={() => setSize(size + 1)}>Load More</button>
  </div>
}

기존의 useSWR과 useSWRInfinite 가장 크게 다른 점은 getKey 함수와 반환되는 data의 형태이다.

getKey 함수가 현재 페이지의 인덱스와 이전 페이지의 데이터를 인자로 받기 때문에 useSWR에 보다 인덱스 기반 및 커서 기반 페이지네이션을 쉽게 지원할 수 있습니다.

또한 응답받는 data가 하나의 API 응답이 아닌 여러 API의 응답의 배열 형태입니다.

// ex) 반환되는 data 형태 => 2차원 배열
[
  [
    { name: 'Alice', ... },
    { name: 'Bob', ... },
    { name: 'Cathy', ... },
    ...
  ],
  [
    { name: 'John', ... },
    { name: 'Paul', ... },
    { name: 'George', ... },
    ...
  ],
  ...
]