처음 만난 Next.js 문서
8.1
SWR 소개 및 역할
지금부터는 SWR에 대해서 살펴보도록 하겠습니다. SWR은 Next.js를 만든 Vercel에서 만든 Data Fetching 및 Caching 라이브러리입니다. 그래서인지 Next.js의 상승세와 더불어 더 많이 사용되는게 아닐까 라는 생각을 해봅니다.
SWR이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었다고 합니다. 참고로 이 전략은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다. 쉽게 말해서 캐싱된 데이터가 있으면 그걸 반환하고, 이후 최신 데이터를 받아와서 업데이트하는 것이죠.
이러한 SWR이 하는 역할은 서버로부터 받아온 데이터를 캐싱하고, 캐싱된 데이터가 유효한 시점에 클라이언트에서 동일한 요청을 할 경우 서버에 재요청을 하지 않고 캐싱된 데이터를 곧바로 반환함으로써 빠른 응답을 제공하는 역할을 합니다. 물론 캐싱된 데이터가 오래되거나 유효하지 않게 될 경우 다시 서버에서 새로운 데이터를 받아와서 갱신하게 됩니다.
그리고 SWR과 유사한 역할을 하는 다른 라이브러리로는 TanStack Query가 있습니다. TanStack Query의 React용 패키지를 보통 React Query라고 부르며, SWR과 마찬가지로 서버로부터 받아온 데이터를 캐싱하고 관리하는 역할을 합니다. 현재 시점의 트렌드 관점에서는 TanStack Query가 더 우세합니다. 하지만 어떤 라이브러리가 훨씬 더 좋다라고 말할 수는 없고, 어떤 라이브러리를 사용할지는 개발자의 선택에 달려있기 때문에 각 라이브러리를 비교해보고 나에게 잘 맞는 것을 사용하면 됩니다.
마지막 업데이트: 2025년 10월 24일 02시 28분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page