Next.js 에서 SWR 좀 더 우아하게 사용하기 - (1 / 3)

신대현·2022년 9월 21일
5

SWR

목록 보기
1/3
post-thumbnail

SWR란?

"SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다.

기능

단 한 줄의 코드로 프로젝트 내의 데이터 가져오기 로직을 단순화할 수 있으며, 다음과 같은 모든 놀라운 기능들을 바로 사용할 수도 있습니다.

  • 빠르고, 가볍고, 재사용 가능한 데이터 가져오기
  • 내장된 캐시 및 요청 중복 제거
  • 실시간 경험
  • 전송 및 프로토콜에 구애받지 않음
  • SSR / ISR / SSG support
  • TypeScript 준비
  • React Native

시작하기

npm install swr
or 
yarn add swr

설정

// _app.tsx
import { fetcher } from "~/your_repo/fetcher";
import { SWRConfig, type SWRConfiguration } from "swr";

const MyApp({ Component, pageProps }: AppProps) {
  const { fallback } = pageProps;
  
  const option: SWRConfiguration = {
    fetcher,
    fallback: fallback || {},
    onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
   	 	// 404에서 재시도 안함
    	if (error.status === 404) return

    	// 특정 키에 대해 재시도 안함
    	if (key === '/api/user') return

  	    // 10번까지만 재시도함
  	    if (retryCount >= 10) return

  	    // 5초 후에 재시도
        setTimeout(() => revalidate({ retryCount }), 5000)
    }
  };
  
  return (
    <SWRConfig value={{ fallback }}>
      <Components {...pageProps} />
    </SWRConfig>
  )
}
// your_repo/fetcher.ts
import axios from "axios";

export const fetcher = (url, token = "", params = {}) => {
  return axios.get(url, { params, headers: token ? { authorization: `Bearer ${token}` } : {} })
    .then((res) => res.data);
};
  • SWR에서는 전역 설정을 지원합니다. 저는 pre-render를 위해 전역 설정에 fetcherfallback옵션을 넣어 SWR을 관리하도록 하겠습니다
  • 위의 예제는 axios는 사용하였으나 어떠한 라이브러리든 사용이 가능합니다. 예제
  • SWR에서는 에러 발생시 재시도 , 전역 에러 처리등 편한 기능이 많습니다.
    공식 홈페이지
    가 너무 잘되어 있기 때문에 홈페이지 참고 바랍니다.

    fetcher 와 fallback 은 다음 포스팅에서 좀 더 자세히 다루어 보겠습니다.

참고

https://github.com/vercel/swr
https://swr.vercel.app/ko

profile
프론트엔드 개발자 입니다

0개의 댓글