Next js에서 swr 사용하기

참고 문서 : https://swr.vercel.app/ko/docs/with-nextjs

react-query vs swr : https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/

SWR 장점

1. 데이터 캐싱
2. SWR은 자동으로 재검증을 해준다

페이지가 빈번하게 업데이트하는 데이터를 포함하고 이를 프리렌더링할 필요가 없다면 SWR방식을 사용하면 좋다

동작 방식

• 먼저, 데이터 없이 페이지를 즉시 보여준다. 빠진 데이터를 위한 로딩 상태를 보여줘도 된다

• 그다음, 클라이언트 사이드에서 데이터를 가져와 준비되면 보여준다

=> 이 방법은 사용자 대시보드 페이지 같은 곳에 적합하다. 대시 보드는 비 공개용이고 SEO가 필요 없고, 페이지를 프리렌더링할 필요가 없기 떄문이다.
데이터는 빈번하게 업데이트되므로 요청 시에 데이터를 가져와야 한다.

기본값으로 프리렌더링

Next.js는 2가지 형태의 프리렌더링을 지원 한다.
1. SSG
2. SSR

SWR와 함께 SEO를 위해 페이지를 프리렌더링 할 수 있고, 캐싱, 재검증, 포커스 추적, 클라이언트 사이드에서 간격을 두고 다시 가져오기와 같은 기능도 있다.

모든 SWR hooks에 초기값으로 프리패칭된 데이터를 넘겨주기 위해 SWRConfig의 fallback 옵션을 사용할 수 있다.

 export async function getStaticProps () {
  // `getStaticProps`는 서버 사이드에서 실행됩니다.
  const article = await getArticleFromAPI()
  return {
    props: {
      fallback: {
        '/api/article': article
      }
    }
  }
}

function Article() {
  // `data`는 `fallback`에 있기 때문에 항상 사용할 수 있습니다.
  const { data } = useSWR('/api/article', fetcher)
  return <h1>{data.title}</h1>
}

export default function Page({ fallback }) {
  // `SWRConfig` 경계 내부에 있는 SWR hooks는 해당 값들을 사용합니다.
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

위 코드의 페이지는 여전히 프리렌더링이 된다. SEO 친화적이고, 응답이 빠르지만, 클라이언트 사이드의 SWR에 의해 완전히 구동됩니다. 데이터는 동적이고 시간이 지나면서 자체 업데이트될 수 있다