앱 라우터의 데이터 패칭
원래 비동기 함수를 컴포넌트에 async를 사용하지 못했고 -> 브라우저에서 비동기시 동작에 오류가 발생할수있어서
하지만 app router에서 async를 붙여서 데이터 패칭이 가능해졌다.
"Fetching data where its neeeded" 데이터가 필요한 곳에서 직접 불러온다
기존에 Page Async
Async는 무조건 promise를 반환한다 따라서 JSX가 아니라 Promise를 반환함 따라서
데이터 fetching은 getServerSideProps/getStaticProps/getInitialProps에서 수행했다.이 결과를 컴포넌트에서 props로 받아서 전달하는 방식 즉 react 외부에서 props 준비하고, 하위 컴포넌트에게 props를 전달하는 케이스
Next.js 13이상 App Router + React 18부터는 Server Component 개념이 생기면서 Async 컴포넌트도 사용가능하게 됨.
-
서버에서 렌더링될 때 React가 Promise를 “suspend” 처리하고, 완료될 때까지 기다렸다가 RSC Payload로 직렬화해서 클라이언트에 전달하기 때문
ENV
NEXT_PUBLIC 접두사 없이 env 변수를 선언하면, 서버측에서만 사용가능한 프라이빗한 환경변수가 된다.데이터 캐시
fetch method를 사용해서 불러온 데이터를 서버에 보관하는 기능: 한번 불러온 데이터를 빠르게 불러올수있다
일반적인 fetch 메서드가 아닌 기능이 확장된 fetch이기 때문에 next fetch 메서드에서만 사용가능
캐싱 기본값 -> no-store
//next.config.mjs
//패칭을 로그를 기록하는 설정
const nextConfi ={
logging:{
fetches:{
fullUrl:true,
},
},
};
//no-store: 캐싱하지 않음 ,캐싱 기본값
const response = await fetch('/api', {cache:'no-store'});
//HIT-MISS-SET, 무조건 캐싱 저장 , 다시 호출하지 않음
const response = await fetch('/api', {cache:'force-cache'});
//ISR과 유사한 방식으로 특정 시간 주기로 케시를 업데이트함
const response = await fetch('/api', {next:{revalidate: 3}});
//요청이 들어왔을때 최신화, On-Demand Revalidate
const response = await fetch('/api', {next:{tag: ['a']}});Request Memoization
하나의 페이지를 랜더링 하는 동안에 중복된 API 요청을 캐싱하기 위해, 렌더링이 종료되면 모든 캐시가 소멸된다.
따라서 같은 요청을 같은 렌더링 사이클(render cycle) 안에서 여러 번 실행했을 때, 실제 요청은 한 번만 보내고 결과를 공유하는 기능.
App router로 오면서 각각 컴포넌트에서 date fetching을 불를수있게 되는데, 다른 컴포넌트에서 같은 fetching을 진행하게 되면 불필요하게 fetching을 진행하기 때문에.
Request Memoization = 짧은 기간, 같은 렌더링 안에서 중복 요청 방지
Cache = 긴 기간, 렌더링 이후에도 재사용되는 데이터 저장
Full Route Cache
특정 라우트 전체의 렌더링 결과를 캐싱해두는 것 page.tsx가 만들어내는 최종 HTML + RSC Payload를 저장해두는 방식 하나의 페이지를 전체 캐싱
Dynamic Page로 설정되는 기준:
특정 페이지가 접속 요청을 받을 때 마다 매번 변화가 생기거나, 데이터가 달라질 경우
- 캐시되지않는 Data Fetching 사용할경우 {cache:'no-store'}
- 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트인 경우
Static Page로 설정되는 기준
Dynamic Page가 아니면 다 (default page)
Suspense
다이나믹 페이지를 빌드 타임에 불러올때 에러가 생기는데 그건 비동기 작업들을 완료해야되기 때문 클라이언트 사이드에서 랜더링이 필요하다 따라서 suspense로 컴포넌트를 감싸고 해당 컴포넌트의 비동기 작업을 완료하고 클라이언트 사이드에서 mount되었을떄 suspense가 풀리면서 랜더링을 진행한다.
<Suspense fallback={<div>...loading</div>}>
<MyComponent>
</Suspense>