특징
useEffect를 사용하지 않고 데이터를 로드해보자.
data 폴더를 만들어서 그 안에 더미데이터 파일을 넣었다.
페이지가 로드된 후에만 client side에서 전송되는 http 요청 대신,
컴포넌트 페이지를 사전 렌더링하기 전에 Next.js가 데이터를 prefetch 해야 한다.
props 키의 데이터는 개발자가 설정하지만 객체이어야 한다.
여기서는 배열을 보유하고 있는 products가 key 이고, 배열은 객체를 가지고 있음.
getStaticProps 함수랑 HomePage 함수 실행 모두 미리 수행하기 때문에 client side에서는 두 코드 모두 실행되지 않는다. 빌드시간이나 사용중인 개발 서버의 일부로 개발중에 발생한다.
이렇게 작성하면,
title인 Product 1이 보이는 것을 확인 할 수 있다.
페이지 소스를 보면 Product 1이 있는 것을 확인할 수 있다. => client 에게 보내진 페이지의 일부라는 뜻 => 즉, Product 데이터 페칭은 client에서 발생한게 아니다. 서버에서 발생한 것 !
개발자 도구의 Sources 탭으로 가서 js 코드 파일을 보면
이 밑에 코드는 아무 곳에서도 보이지 않을 것이다. client side에 제공되는 코드가 아니기 때문임
getStaticProps 코드가 client side에서 실행되지 않기 때문에 서버 측 작업을 수행할 수 있다.
ex1) 사용자가 볼 수 없는 credential을 쓸 수 있고,
ex2) 파일 시스템에 접근하는 코드와 같이 브라우저에서 작동하지 않는 코드도 실행할 수 있다.