// SWR
SWR 은 Stale-While-Revalidate 의 약자이다.
데이터 캐싱, 초기화 등을 간단하게 처리할 수 있게 해준다.
사용이 간편하고 캐시된 데이터를 반환하기 때문에 속도가 빠르다.
전역 상태 관리도 용이하여 많이 사용하는 React 훅이다.
만약 전역 상태 관리에 초점을 맞출 거면 Redux나 zustand 같은 것을 사용하는 게 낫고, 데이터 fetching에 초점을 맞출 거면 react-query를 사용하는 게 나은 것 같다.
일단 당장 내가 사용할 기능들은 SWR로 충분하기 때문에 가벼운 걸로 하자~ 해서 SWR을 사용해보았다.
※ 공식 문서: https://swr.vercel.app/docs/getting-started
Getting Started – SWR
SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.
swr.vercel.app
▪ 설치
npm i swr▪ SWRConfigContext 설정
별도의 컴포넌트를 생성하여 SWR을 설정해준다.
'use client';
import { SWRConfig } from 'swr';
interface SWRProps {
children: React.ReactNode;
}
export default function SWRConfigContext({ children }: SWRProps) {
return (
<SWRConfig
value={{ fetcher: (url: string) => fetch(url).then((res) => res.json()) }}
>
{children}
</SWRConfig>
);
}
SWR은 클라이언트 사이드에서 동작하기 때문에 클라이언트 컴포넌트로 만들어주어야 한다.
▪ app/layout.tsx 설정
메인 레이아웃에 등록해서 어디에서도 SWR을 사용할 수 있게 해준다.
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} mx-auto max-w-screen-md text-lg`}>
<AuthContext>
<Header />
<main>
<SWRConfigContext>{children}</SWRConfigContext>
</main>
</AuthContext>
</body>
</html>
);
}▪ SWR 사용하기
const { data, isLoading, error } = useSWR('URL');SWR은 기본적으로 GET 요청 시 활용된다.
'클라이언트 > Next.js' 카테고리의 다른 글
| [Next.js] Sanity 사용하기 (0) | 2024.07.14 |
|---|---|
| [Next.js] Next 14에서 NextAuth 사용하여 소셜 로그인 구현하기 (구글 로그인) (0) | 2024.07.09 |
| [Next.js] Redirects, Rewrite (0) | 2024.06.29 |
| [Next.js] 데이터 캐싱하기 (0) | 2024.06.27 |
| [Next.js] Interception Routes와 Parallel Routes로 모달(Modal) 구현하기 (0) | 2024.06.25 |
