Next.js] SSR 실습.2

fetchRandomBooks- 렌덤으로 도서 추천 API 불러오는 함수

import { BookData } from "@/types";

export default async function fetchRandomBooks(): Promise<BookData[]> {
  const url = "http://localhost:12345/book/random";
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error();
    }

    return await response.json();
  } catch (error) {
    console.error("Failed to fetch random books", error);
    return [];
  }
}

getServerSideProps안에서 함수로 API를 불러오고

export const getServerSideProps = async () => {
  //컴포넌트 보다 먼저 실행되어서, 컴포넌트에 필요한 데이터를 불러오는 함수

  const allBooks = await fetchBooks();
  const ✅recoBooks = await ✅fetchRandomBooks();
  console.log("allBooks", allBooks);
  return {
    //무조건 객체를 반환해야함
    //객체안에 props라는 키를 가지고 있어야함
    //페이지안에 props로 전달됨
    props: {
      allBooks,
      recoBooks,
    },
  };
};

export default function Home({
  allBooks,
  ✅recoBooks,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  console.log("data", allBooks);
  //window 사용하고 싶을떄 useEffect 사용하기
  useEffect(() => {
    console.log(window);
  }, []);
  return (
    <div>
      <section className={styles.container}>
        <h3>지금 추천하는 도서</h3>
        {✅recoBooks.map((book) => (
          <BookItem key={book.id} {...book} />
        ))}
      </section>
      <section className={styles.container}>
        <h3>등록된 모든 도서</h3>
        {books.map((book) => (
          <BookItem key={book.id} {...book} />
        ))}
      </section>
    </div>
  );
}

좀더 고도화 시키자.

위에보다 좀더 고도화 시키자

export const getServerSideProps = async () => {

지금은 하나 끝나면 하나 실행하는 직렬적인 방싱
이제는 병렬로 둘다 같이 API를 호출할수있도록!!
  const allBooks = await fetchBooks();
  const recoBooks = await fetchRandomBooks();

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

조금 더 빠르게 변신!

await Promise.all로 한번에 불러오기

좀더 빠르게 랜더링 된다.

const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

export const getServerSideProps = async () => {

  💙const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

  console.log("allBooks", allBooks);
  return {

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

Search 페이지 작업

쿼리스트링 서버사이드 함수에서 읽어오기 -context: GetServerSidePropsContext

context: GetServerSidePropsContext란?

현재 브라우저에게 받은 모든 요청이 적혀있따!

context.params!.id 로 주소 가져오기

export const getServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  const { id } = context.params || {};

  if (!id || typeof id !== "string") {
    return {
      notFound: true,
    };
  }

  const book = await fetchOneBook(Number(id));

  if (!book) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      book,
    },
  };
};