Skip to main content
← 스터디로 돌아가기

Server Optimized

Server Component 기본: 리스트 렌더링은 서버에서, 검색 필터만 Client Component로 분리했습니다. JS 번들이 최소화됩니다.

이 페이지는 Server Component입니다. 아이템 리스트는 서버에서 렌더링되고, 검색 필터만 작은 Client Component로 분리됩니다. 클라이언트 JS 번들이 크게 줄어듭니다.

Item 1이것은 아이템 1의 설명입니다. 서버에서 렌더링됩니다.
1,500원
Item 2이것은 아이템 2의 설명입니다. 서버에서 렌더링됩니다.
2,000원
Item 3이것은 아이템 3의 설명입니다. 서버에서 렌더링됩니다.
2,500원
Item 4이것은 아이템 4의 설명입니다. 서버에서 렌더링됩니다.
3,000원
Item 5이것은 아이템 5의 설명입니다. 서버에서 렌더링됩니다.
3,500원
Item 6이것은 아이템 6의 설명입니다. 서버에서 렌더링됩니다.
4,000원
Item 7이것은 아이템 7의 설명입니다. 서버에서 렌더링됩니다.
4,500원
Item 8이것은 아이템 8의 설명입니다. 서버에서 렌더링됩니다.
5,000원
Item 9이것은 아이템 9의 설명입니다. 서버에서 렌더링됩니다.
5,500원
Item 10이것은 아이템 10의 설명입니다. 서버에서 렌더링됩니다.
6,000원
Item 11이것은 아이템 11의 설명입니다. 서버에서 렌더링됩니다.
6,500원
Item 12이것은 아이템 12의 설명입니다. 서버에서 렌더링됩니다.
7,000원
Item 13이것은 아이템 13의 설명입니다. 서버에서 렌더링됩니다.
7,500원
Item 14이것은 아이템 14의 설명입니다. 서버에서 렌더링됩니다.
8,000원
Item 15이것은 아이템 15의 설명입니다. 서버에서 렌더링됩니다.
8,500원
Item 16이것은 아이템 16의 설명입니다. 서버에서 렌더링됩니다.
9,000원
Item 17이것은 아이템 17의 설명입니다. 서버에서 렌더링됩니다.
9,500원
Item 18이것은 아이템 18의 설명입니다. 서버에서 렌더링됩니다.
10,000원
Item 19이것은 아이템 19의 설명입니다. 서버에서 렌더링됩니다.
10,500원
Item 20이것은 아이템 20의 설명입니다. 서버에서 렌더링됩니다.
11,000원

최적화된 구조

// server-optimized/page.tsx (Server Component)
// → JS 번들에 포함되지 않음
import SearchFilter from './SearchFilter'

const Page = () => {
  return (
    <div>
      {/* Client Component: 검색만 */}
      <SearchFilter />

      {/* Server Component: 리스트 렌더링 */}
      {ITEMS.map(item => <div>...</div>)}
    </div>
  )
}

// server-optimized/SearchFilter.tsx
'use client'  // ← 최소한의 Client Component
const SearchFilter = () => {
  const [filter, setFilter] = useState('')
  return <input onChange={...} />
}

Heavy Client (이전)

  • • 전체 페이지 → JS 번들
  • • 20개 아이템 데이터 → JS 번들
  • • 필터/정렬 로직 → JS 번들
  • • hydration 느림 → prefetch 지연

Server Optimized

  • • 리스트 렌더링 → 서버 (JS 0)
  • • 아이템 데이터 → 서버 (JS 0)
  • • 검색 필터만 → 작은 JS
  • • hydration 빠름 → prefetch 빠름

핵심: 'use client' 경계를 필요한 최소 단위(SearchFilter)로 내리면 번들 크기가 줄어들고, hydration이 빨라지며, Link의 prefetch가 더 빨리 시작됩니다.

← 목록으로 돌아가기