fetch() API

• 서버 구성 요소에서 바닐라 web API를 사용해 데이터를 페칭할 수 있음
• 리액트에서는 fetch를 시도할 때 중복되는 데이터를 캐싱해두고, Next.js에서는 데이터를 캐싱함과 동시에 revalidate해줌
• 클라이언트 단에서 데이터를 가져올 수 있지만, 일반적으로 서버에서 데이터를 가져오는 것을 권장함
  백엔드 데이터에 직접 접근 가능하고, 민감한 정보를 숨길 수 있으며, 클라이언트 대신 페칭 작업을 수행해 작업 횟수를 줄일 수 있음

Component-level Data Fetching

• Next.js에서는 layout, page, component에서 데이터를 가져올 수 있음
  layout간에는 데이터를 전달할 수 없음
  여러번의 데이터를 요청해도 서버나 리액트 단에서 캐싱되기 때문에 필요한 데이터가 여러개 있더라도 필요한 레이아웃에서 직접 데이터를 가져오는 것을 권장함
  
• 데이터를 가져올 때는 병렬로 여러개의 데이터를 가져오거나, 순차적으로 여러 데이터를 가져오게 할 수 있음
  병렬 데이터 페칭이 속도면에서 유리하나, 리소스 절약이 필요하거나 데이터 페칭에 조건이 필요한 경우에는 순차 데이터 페칭을 사용함
  
• 트리의 여러 구성 요소에서 동일한 데이터가 필요하는 경우 Next.js에서는 데이터를 캐싱해 중복으로 데이터를 가져오게 하는것을 방지해줌

Static vs Dynamic Data Fetches

• Static Data는 블로그 게시물같이 자주 바뀌지 않는 데이터들을 의미함
• Dynamic Data는 장바구니 리스트같이 자주 바뀌는 데이터들을 의미함
• 기본적으로 Next.js는 정적 데이터 가져오기를 수행함
  이를 통해 DB의 부하를 줄이고, 캐싱을 통해 로딩 성능을 향상시킬 수 있음