넥스트 Next.js
6. Next.js 15의 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트(Client Components)
안녕하세요! 태마입니다.
Next.js 기초 강좌입니다.
강좌의 경우
1. 주제 간단 정리
2. 상세 주제 정리
으로 이루어져 있습니다.
넥스트 Next.js
포스팅 시작하겠습니다 :)
1. 주제 간단 정리
1. Next.js 15에서 서버 컴포넌트와 클라이언트 컴포넌트란?
Next.js 15에서는 **기본적으로 모든 컴포넌트가 서버 컴포넌트(Server Components, RSC)**이다.
하지만 **useState, useEffect 등 클라이언트 측 상태 및 이벤트 처리가 필요한 경우 클라이언트 컴포넌트(Client Components)**를 사용해야 한다.
📌 Next.js 15에서의 컴포넌트 타입
✔ 서버 컴포넌트(Server Components, 기본값) → 서버에서 실행되며, 클라이언트에 최소한의 데이터를 전송
✔ 클라이언트 컴포넌트(Client Components) → use client 지시어를 추가하여 클라이언트에서 실행
✅ 서버 컴포넌트(Server Components) vs 클라이언트 컴포넌트(Client Components) 비교
구분서버 컴포넌트(Server Components)클라이언트 컴포넌트(Client Components)
| 실행 위치 | 서버에서 실행 | 브라우저에서 실행 |
| 데이터 패칭 | 서버에서 직접 데이터 패칭 가능 | fetch 사용 가능하지만 서버에서 패칭하는 것이 더 적합 |
| SEO | ✅ 서버에서 미리 렌더링되어 SEO에 유리 | ❌ 클라이언트에서 처리되므로 SEO 불리 |
| 상태 관리 (useState, useEffect) | ❌ 사용 불가 | ✅ 사용 가능 |
| 이벤트 핸들링 (onClick, onChange 등) | ❌ 사용 불가 | ✅ 사용 가능 |
| 번들 크기 영향 | ✅ 브라우저로 전송되는 코드 최소화 | ❌ 브라우저에서 실행해야 하므로 번들 크기 증가 가능 |
📌 Next.js 15에서는 서버 컴포넌트를 기본값으로 사용하고, 클라이언트 컴포넌트는 필요한 경우에만 추가하는 것이 권장됨!
2. 서버 컴포넌트(Server Components) 사용 예제
✅ 1) 서버 컴포넌트에서 직접 데이터 패칭 (app/products/page.tsx)
async function getProducts() {
const res = await fetch("https://api.example.com/products", { cache: "no-store" });
return res.json();
}
export default async function ProductsPage() {
const products = await getProducts();
return (
<main>
<h1>🛒 제품 목록 (서버 컴포넌트)</h1>
<ul>
{products.map((product: any) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</main>
);
}📌 서버 컴포넌트에서는 fetch()를 직접 사용할 수 있으며, 클라이언트에서 실행되지 않음!
📌 SEO에 최적화되고 불필요한 클라이언트 번들을 줄일 수 있음!
✅ 2) 서버 컴포넌트 내부에서 클라이언트 컴포넌트 사용 (app/products/page.tsx)
import ProductList from "./ProductList";
export default function ProductsPage() {
return (
<main>
<h1>🛒 제품 목록</h1>
<ProductList />
</main>
);
}📌 서버 컴포넌트는 클라이언트 컴포넌트를 포함할 수 있다.
📌 하지만 클라이언트 컴포넌트에서 서버 기능을 직접 사용할 수는 없다.
✅ 여기까지 Next.js 15에서 서버 컴포넌트(Server Components)를 활용하는 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 클라이언트 컴포넌트(Client Components)는 언제 사용할까?"
✅ 2부에서 클라이언트 컴포넌트가 필요한 경우와 활용법을 배워봅시다!
2. 상세 주제 정리
1. 클라이언트 컴포넌트가 필요한 경우
Next.js 15에서는 서버 컴포넌트가 기본이지만, 아래와 같은 경우에는 클라이언트 컴포넌트가 필요하다.
📌 클라이언트 컴포넌트가 필요한 경우
✔ useState, useEffect, useContext 같은 React 훅을 사용할 때
✔ 이벤트 핸들링(onClick, onChange 등)이 필요한 경우
✔ 클라이언트에서 데이터를 가져오거나 실시간 데이터를 사용할 때
✔ 애니메이션 및 인터랙션 (Framer Motion, GSAP 등)이 필요한 경우
2. 클라이언트 컴포넌트 사용 예제
✅ 1) 클라이언트 컴포넌트에서 상태 관리 (app/components/Counter.tsx)
"use client"; // 클라이언트 컴포넌트로 지정
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>카운터: {count}</h2>
<button onClick={() => setCount(count + 1)}>+1 증가</button>
</div>
);
}📌 클라이언트 컴포넌트는 use client 지시어를 추가해야 하며, React 훅 사용이 가능하다.
✅ 2) 서버 컴포넌트 내부에서 클라이언트 컴포넌트 사용 (app/page.tsx)
import Counter from "./components/Counter";
export default function Home() {
return (
<main>
<h1>🚀 Next.js 15에서 서버 & 클라이언트 컴포넌트</h1>
<Counter />
</main>
);
}📌 서버 컴포넌트 내부에서 클라이언트 컴포넌트를 포함할 수 있음!
✅ 3) 클라이언트 컴포넌트에서 API 데이터 가져오기 (app/components/UserList.tsx)
"use client"; // 클라이언트 컴포넌트
import { useEffect, useState } from "react";
export default function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://api.example.com/users")
.then((res) => res.json())
.then((data) => setUsers(data));
}, []);
return (
<div>
<h2>사용자 목록</h2>
<ul>
{users.map((user: any) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}📌 클라이언트에서 데이터를 가져와야 하는 경우에는 클라이언트 컴포넌트를 사용해야 한다!
✅ 여기까지 Next.js 15에서 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트(Client Components)의 차이점과 활용법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 SEO 최적화는 어떻게 해야 할까?"
✅ 다음 회차에서 Next.js 15의 SEO 최적화 방법 (Head, Open Graph, meta 태그)을 배워봅시다!