[Next.js] SWR을 통해 캐시 데이터 가져오기

SWR란?

• HTTP 캐시 무효 전략인 State-While-Revalidate 에서 유래됨.
• SWR은 캐시로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화 된 데이터를 가져오는 전략
• SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트를 경험할 수 있음.
• Next.js 팀에서 만들었다.

설치

yarn add swr

// npm install swr

사용법

import useSWR from "swr";

const fetcher = (url:string)=>{
    fetch(url).then(res=>res.json())
}
const useUser = () => {
    const { data, error } = useSWR("/api/users/me",fetcher);
    return data;
};

export default useUser;

• useSWR에는 key값과 함수가 인자로 와야한다.
• key는 url 값이 와야하는데 키라고 명명하는 이유는 캐시에 저장할때 사용할 키 값인 데이터의 id 역할을 하기 때문(/api/users/me)
• 두번째 인자로 오는 함수는 key값에 적은 url을 통해 접근할 수 있는 비동기 함수가 오면 됨. (fetcher)
  • fetcher가 실행되면 data,error, isValidating(요청|갱신 로딩여부), mutate(캐시 된 데이터를 뮤테이트 하기 위한 함수)가 반환된다.
•  세번째 인자로는 옵션이 온다. 

동적으로 재사용 가능하게 만들기

const useUser = (id:string) =>{
	const {data,error} = useSWR(`/api/users/${id}`,fetcher);
    return {user:data, isError:error } 

}

SWR 장점

• 동일한 요청이 여러번 호출 될 일이 없음( 내장된 캐시 및 요청 중복 제거 ) - SWR을 사용하지 않았을 경우 페이지에 넘어올때마다 동일한 요청을 계속해서 하는 비효율적인 활동을 함
• 요청이 중첩되어도 한번만 호출
• state를 분리하기 편리하며 코드 또한 간단