페이지라우터와 앱라우터의 데이터 패칭 방식의 차이에 관한 질문.
해당 강의에서 선생님이 설명해주시기로는,
페이지라우터와 앱라우터의 차이로 인해
앱 라우터 버전에서는 리퀘스트 메모이제이션이 생겼다고 하셨습니다.
페이지라우터에서는, 트리의 최상단에서 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 컴포넌트를 호출하면서 데이터를 넘겨주고 있습니다.
선생님이 설명하신 부분이 제가 이해한 부분과는 다른걸까요?
답변 1
0
안녕하세요 이정환입니다.
오해가 있으신것 같습니다! "서버 컴포넌트에서 필요한 데이터를 직접 Fetching 하면 된다" 라는 이야기는 "서버 컴포넌트끼리 데이터를 Props로 주고받지 못한다" 라는 이야기가 아닙니다.
서버 컴포넌트간에도 역시 당연히 페이지 라우터 버전과 동일하게 데이터를 주고 받을 수 있습니다. 그러나 굳이 이렇게 할 이유가 없으므로 그렇게 하지 않는 것 입니다. 데이터의 전달이 복잡해지니까요
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
35
2
next.js 프로젝트
0
37
1
Next.js + Tanstack Query BFF 구조 질문
0
36
2
Next.js 사전렌더링 이해하기 부분
0
39
2
모달 관련 질문
0
45
3
렌더링 관련 질문
0
83
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
64
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
67
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
76
2
npx prisma db push 시 에러가 뜹니다.
0
96
3
vercel 배포를 실패하였습니다.
0
108
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
64
2
getServerSideProps 함수와 SSR의 관계
0
83
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
62
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
118
2
일반적인 nextjs project architecture에 대하여..
0
94
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
75
2
배포 시 오류 발생
0
91
2
백엔드 서버 오류납니다.
0
87
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
95
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
111
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
63
2
빨간줄 설정
0
81
2
익스텐션 질문
0
61
1