페이지라우터와 앱라우터의 데이터 패칭 방식의 차이에 관한 질문.

해당 강의에서 선생님이 설명해주시기로는,

페이지라우터와 앱라우터의 차이로 인해

앱 라우터 버전에서는 리퀘스트 메모이제이션이 생겼다고 하셨습니다.

페이지라우터에서는, 트리의 최상단에서 api요청이 발생한다음에 해당 결과값을 각 컴포넌트에 나눠주는 구조이고, 앱 라우터는 모든 서버컴포넌트가 각각 api를 호출해야하는 구조라고 하셧는데, 제가 테스트 해본결과, 서버컴포넌트 끼리도 props로 데이터를 주고받을 수 있는것 같습니다.

그래서 햇갈리는 부분이 존재하는데요.

import "./globals.css";
import Link from "next/link";
import style from "./layout.module.css";
import { BookData } from "@/types";

function InnerFooter({ books }: { books: BookData[] }) {
  return <>{books[0].author}</>;
}

async function Footer() {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`
  );

  if (!response.ok) {
    return <footer>제작 @winterlood</footer>;
  }

  const books: BookData[] = await response.json();
  const bookCount = books.length;

  return (
    <footer>
      <footer>제작 @winterlood</footer>
      <div>{bookCount}개의 책이 존재함</div>
      <InnerFooter books={books} />
    </footer>
  );
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <div className={style.container}>
          <header>
            <Link href={"/"}>📚 ONEBITE BOOKS</Link>
          </header>
          <main>{children}</main>
          <Footer />
        </div>
      </body>
    </html>
  );
}

제가 테스트 한 코드에서는 Footer 컴포넌트가 내부적으로 InnerFooter 컴포넌트를 호출하면서 데이터를 넘겨주고 있습니다.

선생님이 설명하신 부분이 제가 이해한 부분과는 다른걸까요?

인프런 커뮤니티 질문&답변