Next.js 14 서버 컴포넌트와 클라 상태 분리 튜닝

// app/products/page.tsx
'use client'

import { useEffect, useState } from 'react'

export default function ProductsPage() {
  const [items, setItems] = useState<any[]>([])

  useEffect(() => {
    fetch('/api/products').then(r => r.json()).then(setItems)
  }, [])

  return (
    <main>
      <h1>Products</h1>
      {items.map(p => (
        <div key={p.id}>{p.name}</div>
      ))}
    </main>
  )
}

// app/products/page.tsx (Server Component)
import ProductsList from './products-list'
import ProductsToolbar from './products-toolbar'

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; sort?: string }>
}) {
  const { q, sort } = await searchParams

  return (
    <main>
      <h1>Products</h1>
      <ProductsToolbar initialQ={q ?? ''} initialSort={sort ?? 'popular'} />
      <ProductsList q={q ?? ''} sort={sort ?? 'popular'} />
    </main>
  )
}

// app/products/products-list.tsx (Server Component)
export default async function ProductsList({ q, sort }: { q: string; sort: string }) {
  const res = await fetch(
    `${process.env.API_BASE_URL}/products?q=${encodeURIComponent(q)}&sort=${encodeURIComponent(sort)}`,
    {
      // 캐시 전략은 아래에서 자세히 다룸
      next: { revalidate: 60 },
    }
  )

  if (!res.ok) throw new Error('Failed to fetch products')
  const items = (await res.json()) as Array<{ id: string; name: string }>

  return (
    <section>
      {items.map(p => (
        <article key={p.id}>{p.name}</article>
      ))}
    </section>
  )
}

// app/products/products-toolbar.tsx (Client Component)
'use client'

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

export default function ProductsToolbar({
  initialQ,
  initialSort,
}: {
  initialQ: string
  initialSort: string
}) {
  const router = useRouter()
  const sp = useSearchParams()
  const [isPending, startTransition] = useTransition()
  const [q, setQ] = useState(initialQ)
  const [sort, setSort] = useState(initialSort)

  const apply = () => {
    const params = new URLSearchParams(sp.toString())
    params.set('q', q)
    params.set('sort', sort)

    startTransition(() => {
      router.replace(`?${params.toString()}`)
    })
  }

  return (
    <div>
      <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search" />
      <select value={sort} onChange={e => setSort(e.target.value)}>
        <option value="popular">Popular</option>
        <option value="price_asc">Price asc</option>
      </select>
      <button onClick={apply} disabled={isPending}>
        Apply
      </button>
    </div>
  )
}

// app/products/product-card.tsx (Server Component)
import LikeButton from './like-button'

export default function ProductCard({
  product,
}: {
  product: { id: string; name: string; liked: boolean }
}) {
  return (
    <article>
      <h3>{product.name}</h3>
      <LikeButton productId={product.id} initialLiked={product.liked} />
    </article>
  )
}

// app/products/like-button.tsx (Client Component)
'use client'

import { useOptimistic, useTransition } from 'react'
import { toggleLike } from './like-actions'

export default function LikeButton({
  productId,
  initialLiked,
}: {
  productId: string
  initialLiked: boolean
}) {
  const [isPending, startTransition] = useTransition()
  const [optimisticLiked, setOptimisticLiked] = useOptimistic(initialLiked)

  const onToggle = () => {
    startTransition(async () => {
      setOptimisticLiked(v => !v)
      await toggleLike({ productId })
    })
  }

  return (
    <button onClick={onToggle} disabled={isPending}>
      {optimisticLiked ? 'Liked' : 'Like'}
    </button>
  )
}

// app/products/like-actions.ts (Server Action)
'use server'

import { revalidateTag } from 'next/cache'

export async function toggleLike({ productId }: { productId: string }) {
  // DB 업데이트 등
  // await db.likes.toggle({ productId, userId })

  // 관련 RSC 캐시 무효화
  revalidateTag(`product:${productId}`)
}

// app/products/products-list.tsx
export default async function ProductsList({ q, sort }: { q: string; sort: string }) {
  const res = await fetch(`${process.env.API_BASE_URL}/products?q=${q}&sort=${sort}`, {
    next: {
      revalidate: 120,
      tags: ['products'],
    },
  })

  const items = await res.json()
  return <pre>{JSON.stringify(items, null, 2)}</pre>
}

// app/products/admin-actions.ts
'use server'

import { revalidateTag } from 'next/cache'

export async function updateProductName({ productId, name }: { productId: string; name: string }) {
  // await db.products.update(...)
  revalidateTag('products')
  revalidateTag(`product:${productId}`)
}

// app/products/[id]/page.tsx (Server Component)
import { Suspense } from 'react'
import ProductMain from './product-main'
import ProductRecommendations from './product-recommendations'

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params

  return (
    <main>
      <ProductMain id={id} />

      <Suspense fallback={<div>Loading recommendations...</div>}>
        <ProductRecommendations id={id} />
      </Suspense>
    </main>
  )
}

// app/profile/page.tsx (Server Component)
import { updateProfile } from './profile-actions'

export default async function ProfilePage() {
  return (
    <form action={updateProfile}>
      <label>
        Name
        <input name="name" />
      </label>
      <button type="submit">Save</button>
    </form>
  )
}

// app/profile/profile-actions.ts
'use server'

import { revalidatePath } from 'next/cache'

export async function updateProfile(formData: FormData) {
  const name = String(formData.get('name') ?? '')
  // await db.user.update(...)
  revalidatePath('/profile')
}

// app/analytics/chart-widget.tsx
'use client'

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('./heavy-chart'), {
  ssr: false,
  loading: () => <div>Loading chart...</div>,
})

export default function ChartWidget() {
  return <HeavyChart />
}