Client-Side data fetching은 SEO 인덱싱이 필요하지 않거나 데이터를 미리 렌더링할 필요가 없는 페이지에 유용합니다. 또한 컨텐츠를 자주 업데이트 해야할때 유용합니다. 서버사이드 렌더링 API들과 다르게 클라이언트 사이드에서 데이터를 가져올 수 있습니다.

useEffect와 같이 사용하기

function LastSalesPage() {
  const [sales, setSales] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    fetch("api/어떠한-데이터") // 예시 입니다.
      .then((response) => response.json())
      .then((data) => {
        setSales(data);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <p>로딩중...</p>;
  if (!sales) return <p>데이터 없음.</p>;

  return (
    <ul>
      {sales.map((sale) => (
        <li key={sale.id}>
          {sale.username} - ${sale.price}
        </li>
      ))}
    </ul>
  );
}

export default LastSalesPage;

getServerSideProps를 사용하지 않는 페이지는 next.js에 의해서 미리 렌더링이 됩니다. 이러한 코드에서 중요한 점은 이 페이지에서 사용되는 데이터가 next.js에 의해서 제공되지 않는다는 점입니다. next.js는 useEffect()를 제외하고 처음 페이지의 모습만 미리 렌더링해줍니다. 그런 다음 사용자가 해당 페이지에 접속하게되면 Client-side 에서 렌더링이 되게 되면서 데이터를 가져오게 됩니다.

브라우저에서 페이지 소스보기 혹은 원본보기를 해보면, '데이터 없음'이 보이게 됩니다. 이 뜻은 next.js가 페이지를 빌드하면서 useEffect() 내부 코드는 실행시키지 않았다는 뜻입니다.

useSWR 사용해보기

useSWR은 data-fetching을 해주는 훅입니다. Next.js팀에서 개발했으며, Next.js 프로젝트 이 외에도 사용될 수 있습니다.
data-fetching을 위한 커스텀 훅을 만들 필요가 없고, 코드가 조금 더 간결해지는 장점이 있습니다. useSWR은 이외에도 다양한 기능이 있습니다.
https://swr.vercel.app/ko

npm install swr 설치 후 ⇒ import useSWR from "swr";

function LastSalesPage(props) {

  const fetcher = (...args) => fetch(...args).then((res) => res.json());
  const { data, error } = useSWR(
    "/api/어떠한-데아터",
    fetcher
  );

  if (error) {
    return <p>데이터 로딩 실패.</p>;
  }

  if (!data) {
    return <p>로딩중...</p>;
  }

  return (
    <ul>
      {sales.map((sale) => (
        <li key={data.id}>
          {sale.username} - ${sale.price}
        </li>
      ))}
    </ul>
  );
}

export default LastSalesPage;

코드가 간결해진것을 확인할 수 있습니다.

getStaticProps와 함께 사용하기

CSR은 getStaticProps와 함께 사용할 수 있습니다.

function LastSalesPage(props) {
 const [sales, setSales] = useState(props.sales);

 const fetcher = (...args) => fetch(...args).then((res) => res.json());
  const { data, error } = useSWR(
    "/api/어떠한-데아터",
    fetcher
  );

  if (error) {
    return <p>데이터 로딩 실패.</p>;
  }

  if (!data) {
    return <p>로딩중...</p>;
  }

  return (
    <ul>
      {sales.map((sale) => (
        <li key={data.id}>
          {sale.username} - ${sale.price}
        </li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  const response = await fetch(
    "/api/어떠한-데아터"
  );
  const data = await response.json();

  return { props: { sales: data } };
}

export default LastSalesPage;