SWR

nextjs   지원 개발하고 있는  SWR 사용하자.

https://swr.vercel.app/ko

https://github.com/vercel/swr

리덕스 와 사가의  반복적인고 긴 코드들  다 필요없다.

npm i swr  설치후

다음과 같은 코드로면 리덕스 와 사가의 사용없이  개발이 가능하다.

import useSWR from 'swr'

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

https://cloudcoders.xyz/blog/how-to-use-swr-in-next-js-client-side-data-fetching-technique/

 SWR 에서   SSR(서버사이드 랜더링 사용법)

https://swr.vercel.app/examples/ssr

return {
    props: {
      fallback: {
        [API]: repoInfo
      }
    }
  };
}

function Repo() {
  const { data, error } = useSWR(API);

  // there should be no `undefined` state
  console.log("Is data ready?", !!data);

  if (error) return "An error has occurred.";
  if (!data) return "Loading...";
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>???? {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>???? {data.forks_count}</strong>
    </div>
  );
}

export default function App({ fallback }) {
  return (
    <SWRConfig value={{ fallback }}>
      <Repo />
    </SWRConfig>
  );
}

https://swr.vercel.app/ko/docs/with-nextjs