Next.js SWR 예제

 

https://swr.vercel.app/docs/getting-started

Getting Started – SWR

 

SWR은 Next.js팀이 만든 데이터 fetching 라이브러리로, 나는 정확하게는 잘 모르지만 react-query 같은 것이다.

SWR은 데이터를 가져오는 데(get) 엄청 특화된 라이브러리라고 한다.

 

실제로 사용해보니 코드를 정말 정말 정말 간단하게 짤 수 있어서 Next.js를 쓴다면 그냥 SWR를 쓰면 될 것 같다. 데이터 가져오는 부분을 custom-hook으로 만들었다.

 

encodeURI()를 사용한 건 param을 한글을 썼기 때문에 한글을 읽을 수 있도록 처리를 하기 위해서 사용했다.

import axios from "axios";
import useSWR from "swr";
import { BASE_URL } from "../../../utils/common";

export const useDataQuery = (param: string) => {
  const fetcher = (url: string) =>
    axios.get(encodeURI(url)).then((res) => res.data.data);

  const key = `${BASE_URL}/address/${param}`;
  const { data, error } = useSWR(key, fetcher);

  return { data, error };
};

 

굳이 async await try catch 이런 구문 안쓰고 깔끔하게 코드를 짤 수 있는게 큰 장점이라고 생각한다. 사용할 때에도 아래와 같이 깔끔하게 처리했다.

const {data, error} = useDataQuery('param_')

if (error) return <div>failed to load</div>

return (
	<ComponentRender data={data}/>
)