Reducing JS bundle size
레이아웃 대부분은 Server Component로 유지하고, 검색 입력처럼 상호작용이 필요한 부분만 Client Component로 분리하는 실전 구조입니다.
파일 구조
reducing-js-bundle-size/
├── page.tsx
└── demo/
├── layout.tsx ← Server layout
├── page.tsx
├── about/page.tsx
└── ui/
├── logo.tsx ← Server component
└── search.tsx ← Client component핵심 파일 코드
// demo/layout.tsx
import Search from './ui/search' // Client
import Logo from './ui/logo' // Server
export default function Layout({ children }) {
return (
<>
<nav><Logo /><Search /></nav>
<main>{children}</main>
</>
)
}