질문

src/app/(portfolio)/page.tsx에서 _action.ts를 만들지 않고 왜 바로 try-catch를 쓰는 거죠?

export default async function HomePage() {
  try {
    const portfolioData = await getPortfolioHomeData(slug);
    return <PortfolioHomeClient {...portfolioData} />;
  } catch (error) {
    return <ErrorUI />
  }
}

답변

핵심 요약

Server Component (page.tsx)는 이미 서버에서 실행되므로 Service를 직접 호출할 수 있습니다.

• Server Actions (_action.ts): Client Component에서 서버 함수를 호출할 때 사용
• Server Components (page.tsx): 이미 서버에서 실행되므로 직접 Service 호출 가능

Next.js 15의 두 가지 컴포넌트 타입

1. Server Component (기본값)

// ✅ 서버에서 실행
export default async function Page() {
  // 직접 데이터 fetching 가능
  const data = await fetchData();
  return <div>{data}</div>;
}

특징:

• 서버에서만 실행
• async/await 직접 사용 가능
• 데이터베이스, API 직접 호출 가능
• 브라우저로 전송되지 않음 (번들 크기 감소)

2. Client Component

"use client"; // 필수!

// ❌ 서버 함수 직접 호출 불가
export default function ClientComponent() {
  // Server Action 필요
  const handleClick = async () => {
    await serverAction(); // _action.ts 필요
  };

  return <button onClick={handleClick}>Click</button>;
}