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
은 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;
코드가 간결해진것을 확인할 수 있습니다.
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;