오늘은 getStaticProps와 Paths를 사용하여 일부 아이템을 정적으로 표현해봤다.
paths: [
{ params: { id: "740" } },
{ params: { id: "730" } },
{ params: { id: "729" } },
]
보던 강의랑 코드를 비교해봐도 다른 점을 찾을 수 없었어서 같이 스터디하는 분들과
이러저런 테스트를 해보던 중
브라우저에 보여지는 순간 데이터를 읽어오는 걸 확인할 수 있었다.
내가 원하던 건 일단 코드에 적어놓은 3가지의 데이터가 준비된 채로 빠르게 랜더되는 걸
원했지만 상세 페이지로 들어가는 족족 빠르게 랜더가 됐다.
공식 홈페이지를 열심히 찾은 친구덕에 Link에 내장되어있는 prefetch 라는 친구의
기본값이 true라는 걸 알 수 있었다.
그게 뭘 의미하냐면
prefetch -
백그라운드에서 페이지를 미리 가져옵니다. 기본값은 true입니다. 뷰포트에 있는 모든 항목(초기 또는 스크롤을 통해)은 미리 로드됩니다.
위의 설명처럼 스크롤을 통해 보여진 item들이 전부 다 미리 받아와진거였다.
생각지도 못하게 ItemList 컴포넌트에서 각각의 item들을 묶어주던 Link의 이슈였다.
링크에 prefetch={false}를 적어주고 item위에 마우스
호버시에만 호출할 수 있게 바꿔줬다.
이후 문제없이 실행됨.
오늘 배운 점
1. getStaticProps + Paths 처음 써보는데 이슈하나로 인해서 찾아본 내용들이
나에게 많은 공부가 되었다.
2. 이슈나 에러를 좋아하는 사람이 된거 같다.
오늘 느낀 점
1 . 공식 문서가 짱이다.
++ 더 열심히 하자
