React 서버·클라이언트 경계: use client는 어디에 두어야 하는가

import ProductScreen from './product-screen'
 
const PRODUCTS = {
  demo: {
    id: 'demo',
    name: '불변 업데이트 노트',
    description: '변경된 경로에만 새 객체를 만드는 방법을 설명합니다.',
    priceLabel: '무료',
  },
}
 
export default async function ProductPage({ params }) {
  const { id } = await params
  const product = PRODUCTS[id]
 
  if (!product) return <p>상품을 찾을 수 없습니다.</p>
 
  return <ProductScreen product={product} />
}

'use client'
 
import { useEffect, useState } from 'react'
import ProductCopy from './product-copy'
 
export default function ProductScreen({ product }) {
  const storageKey = `product-view:${product.id}:compact`
  const [compact, setCompact] = useState(false)
 
  useEffect(() => {
    setCompact(window.localStorage.getItem(storageKey) === '1')
  }, [storageKey])
 
  function handleToggle() {
    const next = !compact
    setCompact(next)
    window.localStorage.setItem(storageKey, next ? '1' : '0')
  }
 
  return (
    <section data-density={compact ? 'compact' : 'comfortable'}>
      <button onClick={handleToggle}>보기 밀도 바꾸기</button>
      <p>현재 보기: {compact ? 'compact' : 'comfortable'}</p>
      <ProductCopy product={product} />
    </section>
  )
}

const PRODUCT_COPY_STATIC_MARKER = 'PRODUCT_COPY_STATIC_MARKER'
 
export default function ProductCopy({ product }) {
  return (
    <article data-module={PRODUCT_COPY_STATIC_MARKER}>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <strong>{product.priceLabel}</strong>
    </article>
  )
}

pnpm build
rg -n 'PRODUCT_COPY_STATIC_MARKER' .next/static/chunks

import ProductCopy from './product-copy'
import ProductReadingFrame from './product-reading-frame'
 
const PRODUCTS = {
  demo: {
    id: 'demo',
    name: '불변 업데이트 노트',
    description: '변경된 경로에만 새 객체를 만드는 방법을 설명합니다.',
    priceLabel: '무료',
  },
}
 
export default async function ProductPage({ params }) {
  const { id } = await params
  const product = PRODUCTS[id]
 
  if (!product) return <p>상품을 찾을 수 없습니다.</p>
 
  return (
    <ProductReadingFrame storageKey={`product-view:${id}:compact`}>
      <ProductCopy product={product} />
    </ProductReadingFrame>
  )
}

'use client'
 
import { useEffect, useState } from 'react'
 
const CLIENT_FRAME_MARKER = 'CLIENT_FRAME_MARKER'
const FORCE_STORAGE_FAILURE = false
 
function readCompact(storageKey) {
  try {
    if (FORCE_STORAGE_FAILURE) throw new Error('storage test failure')
    return {
      compact: window.localStorage.getItem(storageKey) === '1',
      succeeded: true,
    }
  } catch {
    return { compact: false, succeeded: false }
  }
}
 
function writeCompact(storageKey, compact) {
  try {
    if (FORCE_STORAGE_FAILURE) throw new Error('storage test failure')
    window.localStorage.setItem(storageKey, compact ? '1' : '0')
    return true
  } catch {
    return false
  }
}
 
export default function ProductReadingFrame({ storageKey, children }) {
  const [compact, setCompact] = useState(false)
  const [storageError, setStorageError] = useState(false)
 
  useEffect(() => {
    console.log(CLIENT_FRAME_MARKER)
    const stored = readCompact(storageKey)
    setCompact(stored.compact)
    setStorageError(!stored.succeeded)
  }, [storageKey])
 
  function handleToggle() {
    const next = !compact
    setCompact(next)
    setStorageError(!writeCompact(storageKey, next))
  }
 
  return (
    <section data-density={compact ? 'compact' : 'comfortable'}>
      <button onClick={handleToggle}>보기 밀도 바꾸기</button>
      <p>현재 보기: {compact ? 'compact' : 'comfortable'}</p>
      {storageError ? (
        <p role="status">저장할 수 없어 현재 화면이 유지되는 동안만 적용됩니다.</p>
      ) : null}
      {children}
    </section>
  )
}

pnpm build
rg -n 'CLIENT_FRAME_MARKER' .next/static/chunks
rg -n 'PRODUCT_COPY_STATIC_MARKER' .next/static/chunks

<ProductReadingFrame
  storageKey={`product-view:${id}:compact`}
  onPreferenceChange={(compact) => console.log(id, compact)}
>
  <ProductCopy product={product} />
</ProductReadingFrame>

문제       보기 설정 하나 때문에 상품 본문 전체가 클라이언트 그래프에 포함됨
잘못된 판단 상태가 하나라도 있으면 가장 위 컴포넌트에 use client를 붙여야 함
관찰       정적 본문 표식이 브라우저 JavaScript 빌드 결과에서 발견됨
원인       use client가 import 의존성을 따라가는 모듈 경계임을 놓침
행동       작은 클라이언트 래퍼가 서버 렌더 children과 문자열 key만 받도록 분리
검증       클라이언트 chunk, 새로고침 저장값, 함수 prop 경계 실패를 각각 확인