Next.js App Router 렌더 폭증? useOptimistic·SWR로 상태 분리

'use client'

import { useTransition } from 'react'
import { useRouter } from 'next/navigation'
import { likePost } from './actions'

export function LikeButton({ postId, liked }: { postId: string; liked: boolean }) {
  const router = useRouter()
  const [isPending, startTransition] = useTransition()

  return (
    <button
      disabled={isPending}
      onClick={() =>
        startTransition(async () => {
          await likePost({ postId })
          router.refresh()
        })
      }
    >
      {liked ? 'Liked' : 'Like'}
    </button>
  )
}

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

import { revalidateTag } from 'next/cache'

export async function toggleLike(input: { postId: string }) {
  // DB 업데이트 수행
  // await db.like.toggle(...)

  // 목록이 `fetch(..., { next: { tags: ['posts'] } })`를 사용한다면 태그 기반 재검증
  revalidateTag('posts')

  return { ok: true }
}

'use client'

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

type LikeState = { liked: boolean; count: number }

type Props = {
  postId: string
  initialLiked: boolean
  initialCount: number
}

export function LikeButtonOptimistic({ postId, initialLiked, initialCount }: Props) {
  const [isPending, startTransition] = useTransition()

  const [optimistic, setOptimistic] = useOptimistic<LikeState, { type: 'toggle' }>(
    { liked: initialLiked, count: initialCount },
    (state, action) => {
      if (action.type !== 'toggle') return state
      const nextLiked = !state.liked
      return {
        liked: nextLiked,
        count: state.count + (nextLiked ? 1 : -1),
      }
    }
  )

  return (
    <button
      aria-busy={isPending}
      onClick={() => {
        // UI를 먼저 바꿈
        setOptimistic({ type: 'toggle' })

        // 서버 반영은 transition으로
        startTransition(async () => {
          const res = await toggleLike({ postId })
          if (!res.ok) {
            // 실패 시에는 보수적으로: 이후 SWR revalidate 또는 서버 재검증에 맡기는 편이 안전
            // 이 예제에서는 별도 처리 생략
          }
        })
      }}
    >
      {optimistic.liked ? 'Liked' : 'Like'} ({optimistic.count})
    </button>
  )
}

// app/api/posts/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  // const posts = await db.post.findMany(...)
  const posts = [
    { id: '1', title: 'Hello', liked: false, likeCount: 3 },
    { id: '2', title: 'World', liked: true, likeCount: 10 },
  ]

  return NextResponse.json({ posts })
}

'use client'

import useSWR from 'swr'

type Post = { id: string; title: string; liked: boolean; likeCount: number }

type PostsResponse = { posts: Post[] }

const fetcher = (url: string) => fetch(url).then((r) => r.json())

export function PostsListClient() {
  const { data, isLoading, mutate } = useSWR<PostsResponse>('/api/posts', fetcher, {
    revalidateOnFocus: false,
  })

  if (isLoading) return <div>Loading...</div>

  return (
    <ul>
      {data?.posts.map((p) => (
        <li key={p.id}>
          {p.title} - {p.likeCount}
          <button
            onClick={async () => {
              // 1) SWR 캐시를 낙관적으로 갱신
              await mutate(
                (cur) => {
                  if (!cur) return cur
                  return {
                    posts: cur.posts.map((x) =>
                      x.id === p.id
                        ? {
                            ...x,
                            liked: !x.liked,
                            likeCount: x.likeCount + (!x.liked ? 1 : -1),
                          }
                        : x
                    ),
                  }
                },
                { revalidate: false }
              )

              // 2) 서버 반영
              await fetch('/api/posts/like', {
                method: 'POST',
                headers: { 'content-type': 'application/json' },
                body: JSON.stringify({ postId: p.id }),
              })

              // 3) 정합성 재검증(필요 시)
              mutate()
            }}
          >
            {p.liked ? 'Liked' : 'Like'}
          </button>
        </li>
      ))}
    </ul>
  )
}

'use client'

import { useOptimistic, useTransition } from 'react'
import { mutate as globalMutate } from 'swr'

type Post = { id: string; title: string; liked: boolean; likeCount: number }

export function PostCard({ post }: { post: Post }) {
  const [isPending, startTransition] = useTransition()

  const [optimistic, setOptimistic] = useOptimistic(post, (state, _action: { type: 'toggle' }) => {
    const nextLiked = !state.liked
    return {
      ...state,
      liked: nextLiked,
      likeCount: state.likeCount + (nextLiked ? 1 : -1),
    }
  })

  return (
    <article>
      <h3>{optimistic.title}</h3>
      <button
        aria-busy={isPending}
        onClick={() => {
          setOptimistic({ type: 'toggle' })

          startTransition(async () => {
            await fetch('/api/posts/like', {
              method: 'POST',
              headers: { 'content-type': 'application/json' },
              body: JSON.stringify({ postId: optimistic.id }),
            })

            // 전역 SWR 캐시 재검증: 목록/상세 등 같은 키를 쓰는 곳 동기화
            globalMutate('/api/posts')
          })
        }}
      >
        {optimistic.liked ? 'Liked' : 'Like'} ({optimistic.likeCount})
      </button>
    </article>
  )
}

// 예: 디바운스는 lodash 또는 직접 구현
// URL 업데이트는 확정 시점에만 수행