Server Component Fetching

~20 min · fetch, Server Component, dedupe

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Data hook wiring 그만

Server Component 가 결과 render 하는 component 안에서 직접 fetch() 또는 DB client 호출하게 해줘. useEffect 없음, isLoading state 없음, client-side React Query setup 없음 — framework 가 await 하고 render.

Fetch 위치

Data 필요한 component 에서 fetch, page level 에서 안 함. Layer 셋 거쳐 prop drilling 은 framework 와 싸움. 같은 URL 같은 option 묻는 두 sibling 이 한 network request 만 trigger — request 가 render pass 별로 dedup 됨.

이게 대체하는 것

이 pattern 이 React Query, SWR, Pages Router 의 getServerSideProps 를 "server 에서 fetch, 한 번 render" common case 위해 대체. Client-side fetching library 는 live polling, infinite scroll, offline cache 위해 여전히 가치 있음; 그냥 무게 안 짊어짐.

Code

직접 fetch·tsx

// app/posts/page.tsx
export default async function PostsPage() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 },
  });
  const posts = await res.json();
  return <PostList posts={posts} />;
}

직접 DB query·tsx

import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany({
    include: { posts: true },
    orderBy: { createdAt: 'desc' },
  });
  return <UserTable users={users} />;
}

각 leaf fetch; framework 가 동일 call dedup·tsx

async function Header()  { const me = await fetch('/me');     return <Nav user={await me.json()} />; }
async function Sidebar() { const me = await fetch('/me');     return <UserCard user={await me.json()} />; }
// 둘 다 /me 부름; framework 가 render 별로 한 번만 fetch.

External links

Fetching data

Exercise

Initial server-rendered list 위해 React Query 또는 SWR 쓰는 page 골라. Server Component fetch 로 교체하고 그 page 위해 client-side library dependency 제거.

Progress

Progress is local-only — sign in to sync across devices.

← ⚡ Server & Client Components퀴즈 · 4 questions Next →fetch() 가 더 이상 cache 안 됨

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.