Next.js 14 서버컴포넌트와 클라이언트 상태 동기화

// app/items/page.tsx
import ItemsClient from './items-client'

async function getItems() {
  const res = await fetch('https://example.com/api/items', {
    cache: 'no-store',
  })
  if (!res.ok) throw new Error('failed to load')
  return res.json() as Promise<Array<{ id: string; name: string }>>
}

export default async function Page() {
  const items = await getItems()
  return <ItemsClient initialItems={items} />
}

// app/items/items-client.tsx
'use client'

import { useMemo, useState } from 'react'

type Item = { id: string; name: string }

type Props = {
  initialItems: Item[]
}

export default function ItemsClient({ initialItems }: Props) {
  const [selectedIds, setSelectedIds] = useState(() => new Set<string>())
  const [query, setQuery] = useState('')

  const visible = useMemo(() => {
    const q = query.trim().toLowerCase()
    if (!q) return initialItems
    return initialItems.filter((it) => it.name.toLowerCase().includes(q))
  }, [initialItems, query])

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="search"
      />

      <ul>
        {visible.map((it) => {
          const checked = selectedIds.has(it.id)
          return (
            <li key={it.id}>
              <label>
                <input
                  type="checkbox"
                  checked={checked}
                  onChange={() => {
                    setSelectedIds((prev) => {
                      const next = new Set(prev)
                      if (next.has(it.id)) next.delete(it.id)
                      else next.add(it.id)
                      return next
                    })
                  }}
                />
                {it.name}
              </label>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

// app/items/actions.ts
'use server'

import { revalidatePath } from 'next/cache'

export async function toggleStar(itemId: string) {
  // 실제로는 DB 업데이트
  await fetch('https://example.com/api/items/toggle-star', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ itemId }),
  })

  // 읽기 경로 무효화
  revalidatePath('/items')
}

'use client'

import { useTransition } from 'react'
import { toggleStar } from './actions'

export function StarButton({ itemId, initialStarred }: { itemId: string; initialStarred: boolean }) {
  const [isPending, startTransition] = useTransition()

  return (
    <button
      disabled={isPending}
      onClick={() => {
        startTransition(async () => {
          await toggleStar(itemId)
        })
      }}
    >
      {initialStarred ? 'starred' : 'star'}
    </button>
  )
}

'use client'

import { useOptimistic, useTransition } from 'react'
import { toggleStar } from './actions'

export function StarOptimistic({ itemId, starred }: { itemId: string; starred: boolean }) {
  const [isPending, startTransition] = useTransition()
  const [optimisticStarred, setOptimisticStarred] = useOptimistic(
    starred,
    (prev) => !prev
  )

  return (
    <button
      aria-busy={isPending}
      onClick={() => {
        setOptimisticStarred(null)
        startTransition(async () => {
          await toggleStar(itemId)
        })
      }}
    >
      {optimisticStarred ? 'starred' : 'star'}
    </button>
  )
}

// app/items/page.tsx
export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; page?: string }>
}) {
  const sp = await searchParams
  const q = sp.q ?? ''
  const page = Number(sp.page ?? '1')

  const res = await fetch(`https://example.com/api/items?q=${encodeURIComponent(q)}&page=${page}`, {
    cache: 'no-store',
  })
  const items = (await res.json()) as Array<{ id: string; name: string }>

  return (
    <div>
      <SearchBox initialQ={q} />
      <ItemsList items={items} />
    </div>
  )
}

// app/items/search-box.tsx
'use client'

import { useRouter, useSearchParams } from 'next/navigation'
import { useTransition } from 'react'

export function SearchBox({ initialQ }: { initialQ: string }) {
  const router = useRouter()
  const sp = useSearchParams()
  const [isPending, startTransition] = useTransition()

  return (
    <div>
      <input
        defaultValue={initialQ}
        onChange={(e) => {
          const next = new URLSearchParams(sp.toString())
          next.set('q', e.target.value)
          next.delete('page')

          startTransition(() => {
            router.replace(`/items?${next.toString()}`)
          })
        }}
      />
      <span>{isPending ? 'loading' : ''}</span>
    </div>
  )
}

// app/items/data.ts
export async function getItems() {
  const res = await fetch('https://example.com/api/items', {
    next: { tags: ['items'] },
  })
  if (!res.ok) throw new Error('failed')
  return res.json() as Promise<Array<{ id: string; name: string }>>
}

// app/items/actions.ts
'use server'

import { revalidateTag } from 'next/cache'

export async function createItem(name: string) {
  await fetch('https://example.com/api/items', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ name }),
  })

  revalidateTag('items')
}