다룰 내용

SWR을 사용했을 때 여러 이점이 있겠지만 이 글에서는 SWR의 컨셉과 Next JS의 Pre-Render와 어떻게 페어링 하는지에 대해서 다루도록 하겠습니다.

stale-while-revalidate

"SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. -SWR 홈페이지-

SWR의 이름의 유래는 stale-while-revalidate에서 왔다고 한다. 그렇다면 stale-while-revalidate은 무엇일까?
stale-while-revalidate은 Cache 제어 방법 중에 하나다. 웹 개발자는 주로 HTTP를 사용하여 서버와 클라이언트가 데이터를 주고받는다. 데이터를 주고 받다가 요청과 응답하는 리소스가 매번 같은 경우 필요없는 통신 리소스를 줄이기위해서 Cache를 활용한다.

Cache: 이전의 응답 리소스의 복사복을 저장하고 있다가 요청 시에 복사복을 제공하는 기술

Cache는 클라이언트와 가까이 있어 서버와 직접 데이터를 주고 받는 것보다 더 빠르게 결과를 보여줄 수 있다. 그리고 서버에 요청을 줄여 서버의 부하를 줄여줄 수 있으며 네트워크 트래픽을 줄여줄 수 있다.

HTTP는 이러한 Cache를 제어할 수 있는 여러가지 방법이 있는데 그것을 Cache-Control이라고 하며 그 중 하나가 stale-while-revalidate다. 다른 여러가지 Cache-Control은 MDN 문서에서 확인이 가능하며 이 글에서는 그 중에 stale-while-revalidate과 max-age를 비교해가며 알아보겠다.
우선 max-age는 Cache의 유효기간을 설정할 수 있다. 해당 유효기간 동안은 Cache를 업데이트 하지않고 재사용한다. stale-while-revalidate도 기간을 설정 할 수 있는데 max-age의 유효기간과는 다르다. stale-while-revalidate의 기간동안은 요청시 이전 캐시 데이터를 즉시 사용하지만 비동기적으로 데이터 통신을 하여 업데이트를 진행한다. SWR은 이와같은 방식으로 데이터 통신의 부하를 조절한다.

사용 사례

stale-while-revalidate는 max-age와 같이 사용된다. 두가지 옵션에 시간(초)를 설정하여 사용한다. 예를 들어 max-age=1; stale-while-revalidate=59;로 설정을 했다고하자. 1초 이내에 HTTP 요청이 다시 들어온다면 max-age 이내이므로 지금 갖고 있는 Cache가 최신이라고 판단하므로 Cache 데이터를 재사용한다. 1초 이후 60초 이내에 HTTP 요청이 들어온다면 캐시된 값은 오래되었지만 캐싱된 값을 반환한다. 그리고 백그라운드에서 향후 사용을 위한 캐시를 새로운 값으로 채우도록 재검증 요청이 이루어지게 된다. 60초 이후에는 캐싱된 데이터를 사용하지 않고 서버에 요청하여 받은 응답을 사용한다.

with Next JS (feat. Pre-Render)

SWR은 SWRConfig의 fallback 옵션을 사용하여 Next JS의 SSR과 SSG와의 호환성을 높일 수 있다.

예시 코드

// getStaticProps 혹은 getServerSideProps
export async function getStaticProps () {
  const article = await getArticleFromAPI()
  return {
    props: {
      fallback: {
        '/api/article': article
      }
    }
  }
}

function Article() {
  // `data`는 `fallback`에 있기 때문에 항상 사용할 수 있습니다.
  const { data } = useSWR('/api/article', fetcher)
  return <h1>{data.title}</h1>
}

export default function Page({ fallback }) {
  // `SWRConfig` 경계 내부에 있는 SWR hooks는 해당 값들을 사용합니다.
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

위와 같이 SWR을 사용하여 SSR 혹은 SSG같은 Pre-Render와 호환을 할 수 있다. Pre-Render에서는 SWR이 아닌 axios 또는 fetch를 활용하여 데이터 패칭을 하여 props로 데이터를 넘겨준다. 넘겨 받은 데이터를 SWRConfig의 fallback에 설정해주면 Pre-Render에 손쉽게 데이터를 넘겨줄 수 있다.

정리

이 글을 쓰며 SWR의 컨셉과 Next JS와의 페어링이 왜 좋은지에 대해서 알아봤다. 이전에는 단순히 편하다는 느낌만 갖고 사용하였지만 SWR의 컨셉을 통해 왜 SWR이 다른 데이터 패칭 라이브러리에 비해 편하다고 느껴졌는지 알 수 있었다.
그리고 아직은 사용해본적은 없지만 SWR과 동일한 stale-while-revalidate를 주요 컨셉으로 갖고 있는 React Query에 대해서도 많은 정보를 접하게 되었고 흥미가 생기게 되었다. 만약 React Query에 대해서 궁금증이 생긴다면 이 링크(React query 공식 페이지)에 들어가 다른 데이터 페칭 라이브러리와 비교한 표를 확인하고 좀 더 자세히 SWR과 비교된 글을 원한다면 이 블로그 글을 추천한다. 나는 위 글들을 읽고 React Query에 대해 궁금증이 생겨서 다음 프로젝트에서는 React Query를 사용할 것 같다. React Query를 직접 사용하고나면 사용하며 느낀 SWR과 React Query를 비교하는 글로 돌아오겠다.