SWR 핵심 개념: 오래된 데이터 우선 재검증

SWR은 HTTP 캐시 전략인 '오래된 데이터 우선 제공 후 재검증'을 의미하며, RFC 5861에 정의되어 있습니다. 이 전략은 사용자에게 오래된 데이터(캐시된 데이터)를 즉시 제공한 다음 백그라운드에서 재검증하고, 최신 데이터가 도착하면 UI를 업데이트합니다.

이 방식은 사용자가 네트워크 왕복을 기다리는 대신 데이터를 즉시 보게 하므로 체감 성능을 우선합니다.

기존의 로딩 방식에서는 사용자가 페이지를 이동할 때마다 스피너를 보게 됩니다. SWR을 사용하면 마지막으로 확인된 데이터를 즉시 보여 주고, 데이터가 변경된 경우 백그라운드에서 UI가 조용히 업데이트됩니다.

따라서 애플리케이션이 훨씬 빠르게 느껴지고 로딩 상태로 인한 인지적 중단도 줄어듭니다.

SWR은 다음과 같은 경우 데이터를 자동으로 재검증합니다. 브라우저 창이 다시 포커스를 얻을 때(사용자가 탭을 전환했다가 돌아올 때), 오프라인 상태에서 네트워크 연결이 복구될 때, 명시적으로 mutate()를 호출할 때, 또는 설정 가능한 refreshInterval 타이머가 실행될 때입니다.

이러한 자동 트리거 덕분에 개발자가 다시 가져오기 로직을 직접 관리하지 않아도 데이터를 최신 상태로 유지할 수 있습니다.

SWR 키는 여러 상태 중 하나일 수 있습니다. 로딩 중(캐시된 데이터가 없고 첫 번째 가져오기가 진행 중인 상태), 재검증 중(캐시된 데이터가 있고 백그라운드 새로 고침이 진행 중인 상태), 오류(요청이 실패한 상태), 성공(최신 데이터를 사용할 수 있는 상태)입니다.

이러한 상태를 이해하면 정확한 로딩 스켈레톤과 오류 UI를 만들 수 있습니다.

SWR은 요청 키(일반적으로 URL 문자열)를 기준으로 하는 전역 메모리 내 캐시를 유지합니다. 동일한 키를 요청하는 모든 컴포넌트는 같은 캐시 값을 받고 동일한 재검증 주기에 참여합니다.

이 자동 중복 제거 덕분에 10개의 컴포넌트가 같은 키로 각각 useSWR을 호출해도 네트워크 요청은 한 번만 전송됩니다.

SWR은 캐시 관리 로직을 실제 데이터 가져오기와 분리합니다. 데이터 가져오기 함수를 제공하면 됩니다. 이 함수는 키를 받아 데이터를 반환하는 비동기 함수입니다.

데이터 가져오기 함수는 자유롭게 바꿀 수 있습니다. fetch, axios, graphql-request 또는 어떤 비동기 데이터 소스든 사용할 수 있습니다. 데이터 가져오기 함수가 어떻게 작동하는지와 관계없이 SWR이 캐싱과 재검증을 처리합니다.

데이터 가져오기 함수를 포함하는 value prop과 함께 SWRConfig으로 앱을 감쌉니다. 예를 들면 다음과 같습니다: value={{ fetcher: (url) => fetch(url).then(r => r.json()) }}. 데이터 가져오기 인수를 생략한 모든 useSWR 호출은 이 전역 기본값을 사용합니다.

이렇게 하면 모든 훅 호출에 반복해서 작성하지 않고 기본 URL과 인증 헤더 같은 API 구성을 한곳에서 관리할 수 있습니다.

기존 방식에서는 useEffect와 useState를 사용해 로딩, 데이터, 오류 상태를 직접 관리합니다. SWR은 이 모든 작업을 캐싱, 중복 제거, 백그라운드 새로 고침, 오류 재시도를 자동으로 처리하는 하나의 훅 호출로 대체합니다.

코드가 크게 줄어듭니다. 일반적인 데이터 가져오기 컴포넌트가 20줄 이상에서 3줄로 줄어들 수 있습니다.

키는 요청을 고유하게 식별합니다. 단순한 경우에는 URL 문자열을 사용합니다. 매개변수가 있는 요청에는 [url, params]와 같은 배열 키를 사용하며, params는 안정적인 객체나 문자열이어야 합니다. null은 요청을 비활성화합니다.

키를 잘 설계하면 관련 요청은 캐시 항목을 공유하고 관련 없는 요청끼리는 충돌하지 않습니다.

SWR은 재검증을 영리하게 처리합니다. dedupingInterval(기본값 2초)은 많은 컴포넌트가 동시에 마운트될 때 여러 재검증이 동시에 실행되는 것을 막습니다. 중복 제거 기간 내에는 키마다 요청이 하나만 전송됩니다.

따라서 많은 컴포넌트가 같은 데이터를 가져오는 대규모 컴포넌트 트리에서 흔히 발생하는 요청 폭주 문제를 방지할 수 있습니다.

SWR은 Next.js를 만든 회사인 Vercel이 개발했으며 통합이 원활합니다. getServerSideProps나 getStaticProps로 데이터를 미리 가져올 수 있고, SWR은 클라이언트에서 미리 가져온 값을 사용해 하이드레이션합니다.

이를 통해 서버에서 렌더링한 초기 HTML과 마운트 시 자동으로 실행되는 클라이언트 측 재검증을 함께 사용할 수 있어 SSR과 SWR의 장점을 모두 얻을 수 있습니다.

다음 중 기본적으로 SWR 재검증을 유발하지 않는 것은 무엇입니까?

SWR은 '오래된 데이터 우선 제공 후 재검증' 전략을 구현합니다. 캐시된 데이터를 즉시 제공하고, 백그라운드에서 재검증한 다음 최신 데이터가 도착하면 UI를 업데이트합니다. 포커스 복귀, 연결 복구, mutate, 폴링 시 재검증을 실행합니다. 전역 캐시는 컴포넌트 간 요청을 중복 제거하며 데이터 가져오기 함수도 자유롭게 교체할 수 있습니다.

이 모델은 데이터 가져오기 코드를 크게 단순화하면서 더 빠른 체감 성능을 제공합니다.