Next.js App Router에서 Zustand·Jotai RSC 초기값 주입 패턴 — 서버 상태와 클라이언트 상태를 명확히 나누는 설계

서버(RSC): 데이터 fetch
     ↓  직렬화 가능한 props로 전달
클라이언트 컴포넌트: 스토어 초기화
     ↓
UI 컴포넌트: 스토어 구독 · 상호작용 상태 관리

// ❌ 이렇게 하면 안 됩니다 — 서버에서 요청 간 상태 공유됨
const useProductStore = create<ProductState>((set) => ({
  products: [],
  // ...
}))

// store/product-store.ts
import { createStore } from 'zustand'
 
export interface Product {
  id: string
  name: string
  price: number
}
 
export interface ProductState {
  products: Product[]       // 서버에서 주입되는 초기값
  selectedId: string | null // 클라이언트 상호작용 상태
  setSelectedId: (id: string) => void
}
 
export type ProductStore = ReturnType<typeof createProductStore>
 
export function createProductStore(initialProducts: Product[]) {
  return createStore<ProductState>()((set) => ({
    products: initialProducts,
    selectedId: null,
    setSelectedId: (id) => set({ selectedId: id }),
  }))
}

// components/product-store-provider.tsx
'use client'
import { createContext, useContext, useRef } from 'react'
import { useStore } from 'zustand'
import {
  createProductStore,
  ProductStore,
  ProductState,
  Product,
} from '@/store/product-store'
 
const ProductStoreContext = createContext<ProductStore | null>(null)
 
export function ProductStoreProvider({
  children,
  initialProducts,
}: {
  children: React.ReactNode
  initialProducts: Product[]
}) {
  // useState나 useMemo는 리렌더 트리거나 재계산 가능성이 있어 스토어 보관에 적합하지 않습니다.
  // useRef는 렌더와 무관하게 값을 안정적으로 유지하는 mutable 컨테이너라 여기 딱 맞습니다.
  const storeRef = useRef<ProductStore | null>(null)
  if (!storeRef.current) {
    storeRef.current = createProductStore(initialProducts)
  }
 
  return (
    <ProductStoreContext.Provider value={storeRef.current}>
      {children}
    </ProductStoreContext.Provider>
  )
}
 
export function useProductStore<T>(selector: (state: ProductState) => T): T {
  const store = useContext(ProductStoreContext)
  if (!store) throw new Error('ProductStoreProvider가 없습니다')
  return useStore(store, selector)
}

// app/products/page.tsx  ← 서버 컴포넌트 (기본값)
import { notFound } from 'next/navigation'
import { fetchProducts } from '@/lib/api'
import { ProductStoreProvider } from '@/components/product-store-provider'
import { ProductList } from '@/components/product-list'
 
export default async function ProductsPage() {
  let products
  try {
    products = await fetchProducts() // DB 직접 조회, 인증 쿠키 접근 가능
  } catch {
    notFound()
  }
 
  return (
    <ProductStoreProvider initialProducts={products}>
      <ProductList />
    </ProductStoreProvider>
  )
}

// components/product-list.tsx
'use client'
import { useProductStore } from '@/components/product-store-provider'
 
export function ProductList() {
  const products = useProductStore((s) => s.products)
  const selectedId = useProductStore((s) => s.selectedId)
  const setSelectedId = useProductStore((s) => s.setSelectedId)
 
  return (
    <ul>
      {products.map((p) => (
        <li
          key={p.id}
          onClick={() => setSelectedId(p.id)}
          style={{ fontWeight: selectedId === p.id ? 'bold' : 'normal' }}
        >
          {p.name}
        </li>
      ))}
    </ul>
  )
}

// atoms/product-atoms.ts
import { atom } from 'jotai'
 
export interface Product {
  id: string
  name: string
  price: number
}
 
export const productsAtom = atom<Product[]>([])         // 서버 초기값용
export const selectedIdAtom = atom<string | null>(null) // 클라이언트 상호작용

// components/hydrate-products.tsx
'use client'
import { useHydrateAtoms } from 'jotai/utils'
import { productsAtom, Product } from '@/atoms/product-atoms'
 
export function HydrateProducts({
  products,
  children,
}: {
  products: Product[]
  children: React.ReactNode
}) {
  // 렌더 중 동기적으로 atom 초깃값을 설정합니다 (useEffect보다 안전)
  useHydrateAtoms([[productsAtom, products]])
  return <>{children}</>
}

// app/products/page.tsx
import { notFound } from 'next/navigation'
import { fetchProducts } from '@/lib/api'
import { HydrateProducts } from '@/components/hydrate-products'
import { ProductList } from '@/components/product-list'
 
export default async function ProductsPage() {
  let products
  try {
    products = await fetchProducts()
  } catch {
    notFound()
  }
 
  return (
    <HydrateProducts products={products}>
      <ProductList />
    </HydrateProducts>
  )
}

// app/products/page.tsx (Server Component)
import { HydrationBoundary } from 'jotai-ssr'
import { notFound } from 'next/navigation'
import { fetchProducts } from '@/lib/api'
import { productsAtom } from '@/atoms/product-atoms'
import { ProductList } from '@/components/product-list'
 
export default async function ProductsPage() {
  let products
  try {
    products = await fetchProducts()
  } catch {
    notFound()
  }
 
  return (
    // 서버 컴포넌트 안에서 atom 초깃값을 바로 선언할 수 있습니다
    <HydrationBoundary hydrateAtoms={[[productsAtom, products]]}>
      <ProductList />
    </HydrationBoundary>
  )
}