Next.js RSC에서 리렌더링 줄이는 상태관리 패턴

// app/products/page.tsx (Server Component)
import AddToCartButton from './AddToCartButton'

async function getProducts() {
  const res = await fetch('https://example.com/api/products', {
    cache: 'no-store',
  })
  return res.json()
}

export default async function ProductsPage() {
  const products = await getProducts()

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map((p: any) => (
          <li key={p.id}>
            <div>{p.name}</div>
            <div>{p.price}</div>
            <AddToCartButton productId={p.id} />
          </li>
        ))}
      </ul>
    </div>
  )
}

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

import { useTransition } from 'react'

export default function AddToCartButton({ productId }: { productId: string }) {
  const [isPending, startTransition] = useTransition()

  return (
    <button
      disabled={isPending}
      onClick={() => {
        startTransition(async () => {
          await fetch('/api/cart', {
            method: 'POST',
            headers: { 'content-type': 'application/json' },
            body: JSON.stringify({ productId }),
          })
        })
      }}
    >
      {isPending ? 'Adding...' : 'Add to cart'}
    </button>
  )
}

// app/products/page.tsx (Server Component)
import ProductsFilter from './ProductsFilter'

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: { q?: string; sort?: string; page?: string }
}) {
  const q = searchParams.q ?? ''
  const sort = searchParams.sort ?? 'popular'
  const page = Number(searchParams.page ?? '1')

  const res = await fetch(
    `https://example.com/api/products?q=${encodeURIComponent(q)}&sort=${sort}&page=${page}`,
    { cache: 'no-store' }
  )
  const data = await res.json()

  return (
    <div>
      <ProductsFilter />
      <ul>
        {data.items.map((p: any) => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </div>
  )
}

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

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

export default function ProductsFilter() {
  const router = useRouter()
  const pathname = usePathname()
  const sp = useSearchParams()

  const initialQ = useMemo(() => sp.get('q') ?? '', [sp])
  const [q, setQ] = useState(initialQ)

  function apply() {
    const next = new URLSearchParams(sp.toString())
    if (q) next.set('q', q)
    else next.delete('q')
    next.set('page', '1')

    router.push(`${pathname}?${next.toString()}`)
  }

  return (
    <div>
      <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search" />
      <button onClick={apply}>Apply</button>
    </div>
  )
}

// app/store/ui.ts
import { create } from 'zustand'

type UIState = {
  isCartOpen: boolean
  openCart: () => void
  closeCart: () => void
}

export const useUIStore = create<UIState>((set) => ({
  isCartOpen: false,
  openCart: () => set({ isCartOpen: true }),
  closeCart: () => set({ isCartOpen: false }),
}))

// app/components/CartToggle.tsx
'use client'

import { useUIStore } from '../store/ui'

export default function CartToggle() {
  const isCartOpen = useUIStore((s) => s.isCartOpen)
  const openCart = useUIStore((s) => s.openCart)
  const closeCart = useUIStore((s) => s.closeCart)

  return (
    <button onClick={isCartOpen ? closeCart : openCart}>
      {isCartOpen ? 'Close cart' : 'Open cart'}
    </button>
  )
}

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

import { revalidatePath } from 'next/cache'

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

  revalidatePath('/products')
}

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

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

export default function FavoriteButton({ productId }: { productId: string }) {
  const [isPending, startTransition] = useTransition()

  return (
    <button
      disabled={isPending}
      onClick={() => startTransition(async () => toggleFavorite(productId))}
    >
      {isPending ? 'Saving...' : 'Favorite'}
    </button>
  )
}

// app/layout.tsx
// 안티패턴 예시: 레이아웃 전체를 클라이언트로 만드는 경우
'use client'

import { SomeProvider } from './SomeProvider'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <SomeProvider>{children}</SomeProvider>
      </body>
    </html>
  )
}

// app/products/layout.tsx (Server Component)
import ProductsClientProviders from './ProductsClientProviders'

export default function ProductsLayout({ children }: { children: React.ReactNode }) {
  return (
    <section>
      <h2>Products</h2>
      <ProductsClientProviders>{children}</ProductsClientProviders>
    </section>
  )
}

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

export default function ProductsClientProviders({ children }: { children: React.ReactNode }) {
  return children
}