React 19: サーバーアクションとオプティミスティックUI（ゼロラグ体験）

"use server";

import { revalidatePath } from "next/cache";

export type ActionResponse = {
  success: boolean;
  likesCount?: number;
  error?: string;
};

export async function toggleLikeAction(
  postId: string,
  currentLikes: number
): Promise<ActionResponse> {
  try {
    // Simulate database write
    await new Promise((resolve) => setTimeout(resolve, 800));
    
    // Random failure simulation for resilient rollback demonstration
    if (Math.random() < 0.1) {
      throw new Error("Network timeout while updating likes table");
    }

    const updatedLikes = currentLikes + 1;
    revalidatePath(`/blog/${postId}`);
    return { success: true, likesCount: updatedLikes };
  } catch (err: any) {
    return { success: false, error: err.message || "Failed to register like" };
  }
}

"use client";

import { useOptimistic, useTransition, useState } from "react";
import { toggleLikeAction } from "@/actions/postActions";

interface LikeButtonProps {
  postId: string;
  initialLikes: number;
}

export function LikeButton({ postId, initialLikes }: LikeButtonProps) {
  const [likes, setLikes] = useState(initialLikes);
  const [isPending, startTransition] = useTransition();

  // useOptimistic immediately reflects user intention
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(
    likes,
    (current, increment: number) => current + increment
  );

  const handleLike = async () => {
    startTransition(async () => {
      // 1. Instantly increment UI locally
      setOptimisticLikes(1);

      // 2. Perform Server Action
      const result = await toggleLikeAction(postId, likes);

      if (result.success && result.likesCount !== undefined) {
        // 3. Confirm server state
        setLikes(result.likesCount);
      } else {
        // 4. Auto-rollback occurs automatically because state was not modified!
        alert(`Error: ${result.error || "Could not save like"}`);
      }
    });
  };

  return (
    <button
      onClick={handleLike}
      disabled={isPending}
      className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-red-50 dark:bg-red-950/40 text-red-600 dark:text-red-400 font-semibold hover:scale-105 active:scale-95 transition-all shadow-sm disabled:opacity-75"
    >
      <span>❤️</span>
      <span>{optimisticLikes} Likes</span>
      {isPending && <span className="animate-pulse text-xs text-gray-400">Saving...</span>}
    </button>
  );
}