Server Actions & Optimistic UI

Server Actions & Optimistic UI

Στις παραδοσιακές web εφαρμογές, όταν ο χρήστης εκτελεί μια ενέργεια (π.χ. πατάει "Σήμανση ως Ολοκληρωμένο"), αναγκάζεται να περιμένει 300-800ms για να ταξιδέψει το HTTP αίτημα στον server, να αποθηκευτεί στη βάση και να επιστρέψει η απάντηση. Αυτή η καθυστέρηση κάνει το UI να μοιάζει αργό και δυσκίνητο.

Με το Next.js 16 και τα νέα hooks του React 19 (useOptimistic και useActionState), μπορούμε να ενημερώσουμε το περιβάλλον χρήστη σε 0 milliseconds (Optimistic UI), ενώ ο ασύγχρονος συγχρονισμός με τον server εκτελείται στο παρασκήνιο.

---

1. Το Νοητικό Μοντέλο του Optimistic UI

Το Optimistic UI βασίζεται στην υπόθεση ότι η συντριπτική πλειοψηφία των ενεργειών του χρήστη (>99.9%) θα ολοκληρωθεί με επιτυχία:

1. Άμεση Εφαρμογή: Το τοπικό state ενημερώνεται ακαριαία μόλις γίνει το κλικ (π.χ. το κουμπί πρασινίζει και το εικονίδιο γίνεται checkmark).
2. Ασύγχρονο Server Action: Η κλήση προς τη βάση δεδομένων αποστέλλεται στο παρασκήνιο.
3. Συμφιλίωση (Reconciliation) ή Αυτόματο Rollback:
   • Εάν το action πετύχει, το server state αντικαθιστά ομαλά το optimistic state χωρίς καμία οπτική αναπήδηση.
   • Εάν το action αποτύχει (π.χ. network drop ή authorization failure), το React επαναφέρει αυτόματα το UI στην προηγούμενη κατάσταση και εμφανίζει σχετικό μήνυμα σφάλματος.

---

2. Το Hook useOptimistic του React 19

Το hook useOptimistic δέχεται την πραγματική τιμή από τον server και μια συνάρτηση ανανέωσης (update function):

tsx
Αντιγραφή
import { useOptimistic } from "react"

const [optimisticState, setOptimisticState] = useOptimistic(
  actualState,
  (currentState, updateValue) => {
    // Επιστρέφει τη νέα αισιόδοξη κατάσταση
    return updateValue
  }
)

---

3. Πλήρης Υλοποίηση: CompleteLessonButton

Συνδυάζουμε το useActionState (για διαχείριση της εκκρεμούς κατάστασης και των αποτελεσμάτων του action) με το useOptimistic:

tsx
Αντιγραφή
"use client"

import { useActionState, useOptimistic, startTransition } from "react"
import { setLessonReadAction } from "@/actions/learning"
import { CheckCircle2, Circle, Loader2 } from "lucide-react"

interface CompleteButtonProps {
  initialCompleted: boolean
  courseSlug: string
  lessonSlug: string
}

export function CompleteLessonButton({
  initialCompleted,
  courseSlug,
  lessonSlug,
}: CompleteButtonProps) {
  // 1. Διαχείριση κατάστασης Server Action
  const [state, formAction, isPending] = useActionState(setLessonReadAction, {
    completed: initialCompleted,
    error: null,
  })

  // 2. Αισιόδοξη ενημέρωση κατάστασης ολοκλήρωσης
  const [optimisticCompleted, setOptimisticCompleted] = useOptimistic(
    state.completed,
    (current, update: boolean) => update
  )

  const handleToggle = () => {
    const nextValue = !optimisticCompleted
    // Εκκίνηση μετάβασης: Το UI αλλάζει σε 0ms
    startTransition(async () => {
      setOptimisticCompleted(nextValue)
      const formData = new FormData()
      formData.set("courseSlug", courseSlug)
      formData.set("lessonSlug", lessonSlug)
      formData.set("completed", String(nextValue))
      await formAction(formData)
    })
  }

  return (
    <button
      onClick={handleToggle}
      disabled={isPending}
      className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
        optimisticCompleted
          ? "bg-emerald-500/10 text-emerald-500 border border-emerald-500/30"
          : "bg-muted text-muted-foreground hover:bg-muted/80"
      }`}
    >
      {isPending ? (
        <Loader2 className="h-3.5 w-3.5 animate-spin" />
      ) : optimisticCompleted ? (
        <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
      ) : (
        <Circle className="h-3.5 w-3.5 opacity-60" />
      )}
      <span>{optimisticCompleted ? "Ολοκληρώθηκε" : "Σήμανση ως Ολοκληρωμένο"}</span>
    </button>
  )
}

---

4. Χειρισμός Σφαλμάτων & Rollback Recovery

Εάν ο server επιστρέψει σφάλμα (π.χ. { error: "Unauthorized" }), το React 19 αναγνωρίζει ότι η μετάβαση απέτυχε. Μόλις το isPending γίνει false, το useOptimistic επαναφέρει αυτόματα την τιμή στο πραγματικό state.completed, αποτρέποντας ασυνέπειες δεδομένων.