kim@example.com
ADMIN✅ 이 정보는 서버에서 생성되어 클라이언트로 전송된 HTML에 포함되어 있습니다. 페이지 소스 보기를 통해 확인할 수 있습니다!
Server Components는 서버에서 렌더링되어 성능을 크게 향상시킵니다...
Next.js 15에서 추가된 혁신적인 기능들을 살펴보겠습니다...
TypeScript를 활용한 안전하고 효율적인 개발 방법론...
// ✅ Server Component에서 가능한 것들
export default async function ServerComponent() {
// 1. async/await 직접 사용
const data = await fetchFromDatabase();
// 2. 서버 전용 라이브러리 사용
const fs = require('fs');
const file = fs.readFileSync('server-file.txt');
// 3. 환경 변수 직접 접근
const apiKey = process.env.SECRET_API_KEY;
// 4. 병렬 데이터 페칭
const [users, posts] = await Promise.all([
fetchUsers(),
fetchPosts()
]);
return <div>{data.title}</div>;
}
// ❌ Server Component에서 불가능한 것들
// - useState, useEffect 등 React Hook 사용
// - onClick 등 이벤트 핸들러
// - 브라우저 전용 API (localStorage, window 등)
// - 클라이언트 상태 관리