Next.js useOptimistic로 즉시반응 UI 만들기

'use server'

import { revalidatePath } from 'next/cache'

export type Comment = {
  id: string
  postId: string
  body: string
  createdAt: string
  authorName: string
}

export async function createComment(input: {
  postId: string
  body: string
}): Promise<Comment> {
  // 예시: DB insert
  // 실패 시 throw로 에러 전파

  const now = new Date().toISOString()

  const saved: Comment = {
    id: crypto.randomUUID(),
    postId: input.postId,
    body: input.body,
    createdAt: now,
    authorName: 'me',
  }

  // 실제 구현에서는 DB 결과를 반환
  // 그리고 필요한 경로만 재검증
  revalidatePath(`/posts/${input.postId}`)

  return saved
}

'use client'

import { useOptimistic, useRef, useState, useTransition } from 'react'
import type { Comment } from '@/app/actions/comments'
import { createComment } from '@/app/actions/comments'

type Props = {
  postId: string
  initialComments: Comment[]
}

type OptimisticComment = Comment & {
  optimistic?: boolean
}

export function CommentComposer({ postId, initialComments }: Props) {
  const [comments, setComments] = useState<Comment[]>(initialComments)
  const [isPending, startTransition] = useTransition()

  const [optimisticComments, addOptimistic] = useOptimistic<
    OptimisticComment[],
    OptimisticComment
  >(comments, (state, newItem) => {
    return [newItem, ...state]
  })

  const formRef = useRef<HTMLFormElement>(null)

  async function onSubmit(formData: FormData) {
    const body = String(formData.get('body') ?? '').trim()
    if (!body) return

    const temp: OptimisticComment = {
      id: `temp-${crypto.randomUUID()}`,
      postId,
      body,
      createdAt: new Date().toISOString(),
      authorName: 'me',
      optimistic: true,
    }

    // 1) UI 즉시 반영
    addOptimistic(temp)

    // 2) 입력창 즉시 비우기
    formRef.current?.reset()

    // 3) 서버 액션은 transition으로 실행
    startTransition(async () => {
      try {
        const saved = await createComment({ postId, body })

        // base state를 서버 확정값으로 갱신
        // temp는 서버에서 다시 내려온 목록으로 자연스럽게 사라지게 하거나
        // 아래처럼 직접 치환할 수도 있습니다.
        setComments(prev => {
          // temp 항목 제거 후 saved를 맨 앞에
          const withoutTemp = prev.filter(c => c.id !== temp.id)
          return [saved, ...withoutTemp]
        })
      } catch (e) {
        // 실패 시: base state에 temp가 없으므로
        // optimistic에만 있던 항목은 다음 렌더에서 사라집니다.
        // 사용자에게는 토스트/에러 UI를 보여주는 것이 좋습니다.
        setComments(prev => prev)
      }
    })
  }

  return (
    <div>
      <form ref={formRef} action={onSubmit} className="flex gap-2">
        <input
          name="body"
          placeholder="댓글을 입력"
          className="border px-2 py-1"
          disabled={isPending}
        />
        <button className="border px-3" disabled={isPending}>
          등록
        </button>
      </form>

      <ul className="mt-4 space-y-2">
        {optimisticComments.map(c => (
          <li key={c.id} className="border p-2">
            <div className="text-sm text-gray-600">
              {c.authorName} · {new Date(c.createdAt).toLocaleString()}
              {c.optimistic ? ' (전송 중)' : ''}
            </div>
            <div>{c.body}</div>
          </li>
        ))}
      </ul>
    </div>
  )
}

type OptimisticItem = {
  id: string
  label: string
  status: 'optimistic' | 'confirmed' | 'failed'
}

// reducer에서 상태를 합성
const [optimisticItems, dispatchOptimistic] = useOptimistic<
  OptimisticItem[],
  { type: 'add'; item: OptimisticItem } | { type: 'markFailed'; id: string }
>(items, (state, action) => {
  if (action.type === 'add') return [action.item, ...state]
  if (action.type === 'markFailed')
    return state.map(it => (it.id === action.id ? { ...it, status: 'failed' } : it))
  return state
})

const clientRequestId = crypto.randomUUID()
await createComment({ postId, body, clientRequestId })

const temp = {
  id: `temp-${crypto.randomUUID()}`,
  postId,
  body,
  createdAt: new Date().toISOString(),
  authorName: 'me',
  optimistic: true,
} satisfies OptimisticComment