Inflearn Community Q&A

안녕하세요!

ISR on-demand 활용해서 인덱스 페이지에서 전체 페이지 새로고침 없이
"새로 추천 받기" 버튼을 눌렀을 때 추천 도서(recoBooks)만 새롭게 받아오도록 구현하고 싶습니다.

getStaticProps를 통해 전달된 recoBooks가 useState의 초기값으로 들어갈 때,
해당 데이터도 여전히 빌드 타임에 fetch되어 정적 HTML과 함께 포함되는지 궁금합니다.

개발자 도구를 보면 정적으로 렌더링되는 것 같은데, useState로 상태를 만들었기 때문에 초기 렌더링이 정적인지 아니면 클라이언트 측에서 동적으로 할당되는건지 헷갈립니다.

// CSS Module
import SearchableLayout from '@/components/searchable-layout';
import style from './index.module.css';
import { ReactNode, useState } from 'react';
import BookItem from '@/components/book-item';
import { InferGetStaticPropsType } from 'next';
import fetchBooks from '@/lib/fetch-books';
import fetchRandomBooks from '@/lib/fetch-random-books';

export const getStaticProps = async () => {
  console.log('인덱스 페이지');
  const [allBooks, recoBooks] = await Promise.all([
    // 병렬로 함수 호출하기
    fetchBooks(), //
    fetchRandomBooks(),
  ]);

  return {
    props: {
      allBooks,
      recoBooks,
    },
  };
};

export default function Home({ allBooks, recoBooks }: InferGetStaticPropsType<typeof getStaticProps>) {
  const [recommended, setRecommended] = useState(recoBooks);

  const revalidate = async () => {
    try {
      const response = await fetch('/api/revalidate');
      const result = await response.json();
      // console.log(result);
      if (result.revalidate) {
        //페이지 갱신이 됐을 때
        const rebooks = await fetchRandomBooks();
        setRecommended(rebooks);
      } else {
        //페이지 경신 안됐을 때
      }
    } catch (err) {
      //에러처리
      console.error(err);
    }
  };
  // console.log(recoBooks);
  return (
    <div className={style.container}>
      <section>
        <h3>지금 추천하는 도서</h3>
        <button onClick={revalidate}>새로 추천 받기</button>
        {recommended.map((book) => (
          <BookItem key={book.id} {...book} />
        ))}
      </section>
      <section>
        <h3>등록된 모든 도서</h3>
        {allBooks.map((book) => (
          <BookItem key={book.id} {...book} />
        ))}
      </section>
    </div>
  );
}

Home.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};