MouseNext/AppRouter - 3. 데이터 페칭

Nextjs는 데이터가 필요한데서 데이터를 불러오는것을 권장한다.

// 모든 책을 가져오는 컴포넌트를 하나의 파일에 작성한다
async function ALlBooks() {
  const response = await fetch("주소");
  if (!response.ok) {
   return <div>오류가 발생했습니다 ...<div/> // 예외처리 
  }
  const allBooks: BookData[] = await response.json()
  
  return (
    <div>
    {allBooks.map((book)=>(
      <BookItem key={book.id} {...book} />
  ))}

// 실제 내보내지는 컴포넌트
export default async function Home() {
 	const response = axios.get("주소") 
    
    return (
      <div>
      	<AllBooks/>
      </div>
      )
}
  

API주소 관리

root폴더에 .evn 파일을 만든다.

NEXT_PUBLIC_API_SERVER_URL="서버주소"

앞에 NEXT_PUBLIC 이라는것을 붙이지 않는다면 Next.js는 .env파일에 있는 변수를 서버측에서만 사용할 수 있도록 private하게 만들어버린다. 그러므로 클라이언트에서도 사용하려면 붙여야한다.

사용할때

  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}`);

데이터 캐시

데이터 캐시 : fetch 메서드를 활용해서 불러온 데이터를 Next 서버에 보관하는 기능. 영구적으로 데이터를 보관하거나, 특정 시간을 주기로 갱신 시키는 것도 가능하다. 이러한 옵션은 fetch만 사용 가능하다(axios x) 왜냐하면 next의 fetch는 일반적인 fetch가 아닌 Next에서 제공하는 fetch이기 때문이다.

const response = awiat fetch("주소",{ cache : "force-cahce"}

cache: "no-store" : 캐싱 x (기본값) // Next14이전부터는 저장이 기본값
cache: "force-cache" : 무조건 캐싱, 한번 호출 이후 다시는 호출하지 않음
next: { revalidate: 3 } : 3초 이후 저장된 캐시를 삭제하고 요청이 오면 최신 데이터를 캐싱(저장)한다.
next: { tags: ['a'] } : 요청이 들어왔을 때 데이터를 최신화한다.

리퀘스트 메모라이제이션

하나의 페이지를 렌더링 하는 동안 중복된 API요청을 캐싱하기 위해 존재한다. 렌더링이 종료되면 모든 캐시가 소멸된다. 이 기능은 AppRouter에서는 자동으로 동작이 된다.