정적 생성
정적 생성은 빌드할 때 html을 미리 만들어놓는 것
getStaticProps라는 함수를 만들고
이것을 export한다.Next.js에서 사용하는 특이한 문법인데
함수 이름과 export는 정해진 약속이기때문에
반드시 이름은 getStaticProps로 해야한다.
밑에 있는 데이터를 가져오는 props를 옮긴다.
이 함수 안에서는 리액트 훅을 사용할 수 없다.
앞서 사용했던 리액트 훅은 지워준다.
return값을 만들어준다.
이 값을 props로 받아서 목록을 보여주겠다.
이 코드는 next.js가 실행할 함수를 구현한 것이다.
이름을 getStaticProps로 짓고 export를 하면
정적생성을 할때 next.js가 이 함수를 실행해준다.이 함수는 정적생성을 했을 떄 prop으로 내려줄 값을 만드는 함수이다.
return값으로 객체의 props안에 products가 있다.
이 props를 Home페이지 컴포넌트의 props로 내려준다.
결과 확인
npm run build를 하고 next폴더 안에 server 폴더 안에
pages에 index.html로 들어가서ctrl + shift + p
Format Document를 하면이번에는 상품 목록꺼지 렌더링이 된 것을 확인할 수 있다.
정적생성
정적 생성을 하면 빌드를 하는 시점에 데이터를 기준으로
미리 html파일을 만들어놓는다.
(자주 바뀌지 않는 데이터에서 사용할 수 있다.)
항상 최신값을 보여줘야하는 자주 바뀌는 값을 사용할 떄는
정적생성이 적절하지 않다.
Next.js에서는 우리가 아무것도 안해도 정적생성을 해준다.
정적생성을 하면서 데이터를 가져오면서 쓰고싶다면
getStaticProps라는 함수를 만들고 export한 다음
이 함수에서 return 값으로 props를 만들어주고
이 prop은 페이지 컴포넌트에서 가져오면 된다.
정적생성은 고정된 페이지가 아니라 빌드할 때 프리렌더링한다.
즉, 빌드할 때 html을 미리 만들어놓는다.
다이나믹한 페이지 경로에서 정적 생성
[id].js는 상품데이터의 id이다
정적생성은 빌드할 때 한번만 렌더링하는 것이기 때문에
자주 업데이트되는 데이터에는 적합하지 않다.만약 상품 목록이 자주 바뀌지 않는다면 정적생성을 할 수 있다.
[id].js 에서 getStaticProps 함수를 만들어주고 export한 다음에
기존에 사용하던 product와 관련된 코드를 옮겨준다.
(리액트 훅 사용안된다)
그리고 나서 getStaticProps는 리액트 컴포넌트가 아니기 때문에
리액트 훅을 사용할 수 없다.
필요없는 부분들을 삭제하고
리퀘스트를 보내고 받아온 데이터를 product 변수로 지정한 다음
props로 내려준다.
그 내려준 product는 Product 페이지 컴포넌트에서 사용할 것이다.
targetId은 파일 이름에서 가져오는 Params값이다.
getStatic함수는 리액트 컴포넌트함수가 아니기 때문에
이 안에서는 useRouter훅을 사용할 수 없다.대신에 getStatic함수는 파라미터로 받는 context객체에서
params값을 가져올 수 있다.이렇게만 하면 next.js는 어떤 params가 있는지 전혀 모른다.
어떤 페이지를 미리 만들어놓아야하는지 모른다.이것을 알려주는 함수 구현이 필요하다.
getStaticPaths라는 함수를 구현하면 된다.
(정해진 이름으로 export해주어야하는 함수이다.)이 함수는 다이나믹 페이지를 정적 생성할 떄
어떤 페이지를 생성할 지 정해주는 용도이다.일단 페이지 2개만 정적 생성해보겠다.
params id값으로 각 상품의 아이디를 넣어준 것이다.
params값은 사이트 주소에서 가져온 값이니까 문자열형태로 작성해야한다.
fallback이라는 값은 false로 했는데
없는 경로에 값을 어떻게 할 지 지정하는 것이다.
결과
npm run build를 하고
next폴데에서 확인해보면
1.html, 2.html이 생겼다.
일일이 경로를 적어주기 보다는
모든 상품 목록을 api에서 가져온 다음에 params id값으로 매핑해보겠다.
params값은 문자열이기 때문에 id값을 문자열로 만들어 준다.
npm run build를 해서 확인해보면
1.html
2.html
3.html 등등
상품들 페이지가 정적생성이 된다.
주의)
npm run dev 개발모드로 보면 다르게 동작한다.
개발모드로 확인해보면
매번 페이지를 접속할 때마다 함수를 실행하게된다.
수정사항을 그때 그때 확인하면서 개발하기 떄문이다.그러나 실제 웹사이트 운영 배포에서는 정적생성을 하면
빌드할 때 딱 한번만 실행한다.
