[TIL] 241028_Next.js: Data Cache - Day12

지코·2024년 10월 28일

Today I Learned

목록 보기

41/66

export default function Page() {
	return (
		<h1>앱 라우터 공부 5일차 🤓</h1>
    );
}

약 4주 전에 중단됐던 Next.js 공부를 재개하며! 🪽🪽

https://velog.io/@jpy1030/TIL-241004Next.js-App-RouterData-Petching-Day12
위 포스트에 이어서 작성합니다 ✨

⚡️ 앱 라우터로 데이터 페칭 적용하기

메인 화면은 '지금 추천하는 도서' 섹션과 '등록된 모든 도서' 섹션, 이렇게 두 가지로 나눠져 있다.
기존까지는 목데이터를 사용해서 메인 화면을 띄웠는데, 이제는 api를 연결해서 실제 데이터를 띄울 것이다.

컴포넌트들을 직접 사용하는 Home 컴포넌트 를 비동기로 만들기보다는, 데이터를 패칭하는 함수만 비동기로 만들고 Home 컴포넌트 는 해당 함수들을 사용하기만 하는 것이 더 효율적이다.

아래는 데이터를 패칭하는 함수의 예시 코드이다.

// 모든 도서
async function AllBooks() {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`);
  if (!response.ok) {
    return <div>오류가 발생했습니다.</div>;
  }

  const allBooks: BookData[] = await response.json(); // any 자동 추론 오류를 직접 단언해서 해결.

  return (
    <>
      {allBooks.map((book) => (
        <BookItem key={book.id} {...book} />
      ))}
    </>
  );
}

먼저 환경변수 이름에 "NEXT_PUBLIC" 이 들어가는 이유는 해당 키워드를 붙여야 서버와 클라이언트 측 모두에서 접근 가능하기 때문이다.

fetch 함수를 통해 해당 링크의 api를 불러오고, json 형태로 바꿔 allBooks라는 객체에 저장한다. 이 때 allBooks 객체의 타입을 지정해주지 않으면 타입스크립트 컴파일러가 이를 any 타입으로 자동 추론하는데, 미리 선언해둔 BookData 배열 형태로 단언해줘야 한다.
그 후에는 map 함수를 사용해 데이터를 BookItem 컴포넌트로 뿌려주면 된다.

⚡️ 데이터 캐시

fetch 메서드를 활용해서 불러온 api 서버로부터 불러온 데이터를 넥스트 서버 측에서 캐싱해두는 것.

향후 불필요한 데이터 패칭을 방지하거나, 캐싱해둔 데이터를 특정 시간을 주기로 갱신하도록 설정 가능.

불필요한 데이터 요청 수를 줄여서 웹 서비스의 성능을 크게 개선 가능.

데이터 캐시는 fetch 메서드의 두 번째 인수로 객체 형태로 추가적인 옵션을 설정해줌으로써 적용 가능하다.
예시로 나온 cache 옵션을 force-cache 로 설정한 것은, 요청의 결과를 무조건 캐싱하며 초기에 한 번만 호출하도록 설정하는 것이다. 또한 cache 옵션을 사용하기 위해서는 무조건 fetch 메서드를 사용해야 한다❗️