Heavy Client Component

이 페이지의 소스코드

'use client'  // ← 전체 페이지가 클라이언트 번들에 포함

import { useState } from 'react'

const HeavyClientPage = () => {
  const [filter, setFilter] = useState('')
  const [sortOrder, setSortOrder] = useState('asc')

  // 필터링, 정렬, 리스트 → 모두 클라이언트 JS
  const filtered = ITEMS
    .filter(item => item.title.includes(filter))
    .sort(...)

  return (
    <div>
      <input onChange={e => setFilter(...)} />
      {filtered.map(item => <div>...</div>)}
    </div>
  )
}