Server Actions

🚀 Server Actions: Your Kitchen Staff for React

Imagine you’re running a restaurant. You (the customer) sit at a table and want to order food. You don’t walk into the kitchen yourself—that would be chaos! Instead, you tell the waiter what you want, and the kitchen staff does all the cooking behind the scenes.

Server Actions are like your kitchen staff. They do the heavy work on the server so your app stays fast and secure!

🍳 What Are Server Actions?

Think of Server Actions as special helpers that:

• Live on the server (the kitchen)
• Do important jobs like saving data or talking to databases
• Keep secrets safe (like passwords and API keys)

Without Server Actions:

You → Walk into kitchen → Cook food → Risk burning yourself!

With Server Actions:

You → Tell waiter → Kitchen cooks → Food arrives safely!

✨ Server Actions Basics

The Magic Word: "use server"

To create a Server Action, you write a special spell at the top:

"use server"

async function saveOrder(food) {
  // This runs on the server!
  await database.save(food)
  return "Order saved!"
}

Key Rules:

1. Must be async - Server Actions always return promises
2. Runs on server - Never exposes your secrets to browsers
3. Can be called from client - Your React components can use them!

Simple Example:

// actions.js
"use server"

export async function addToCart(item) {
  // Saves to database (server-side)
  await db.cart.add(item)
  return { success: true }
}

// Component.jsx
import { addToCart } from './actions'

function Button() {
  return (
    <button onClick={() => addToCart("Pizza")}>
      Add Pizza 🍕
    </button>
  )
}

📝 Form Actions

Remember how forms used to work? You’d submit, the whole page would reload, and you’d lose your place. Annoying!

Form Actions make forms magical:

// actions.js
"use server"

export async function submitFeedback(formData) {
  const name = formData.get("name")
  const message = formData.get("message")

  await db.feedback.save({ name, message })
  return "Thanks for your feedback!"
}

// FeedbackForm.jsx
import { submitFeedback } from './actions'

function FeedbackForm() {
  return (
    <form action={submitFeedback}>
      <input name="name" placeholder="Your name" />
      <textarea name="message" />
      <button type="submit">Send</button>
    </form>
  )
}

🎯 What Makes This Special:

• No page reload! Form submits smoothly
• FormData magic - Data arrives ready to use
• Progressive enhancement - Works even without JavaScript!

graph TD
    A["User Fills Form"] --> B["Clicks Submit"]
    B --> C["Form Action Runs on Server"]
    C --> D["Database Updated"]
    D --> E["User Sees Success!"]

⏳ useFormStatus Hook

The Problem: When someone clicks “Submit,” how do they know something is happening? They might click again and again!

The Solution: useFormStatus tells you what the form is doing.

Think of it like a traffic light for your form:

• 🔴 pending = true → “Wait! Working on it…”
• 🟢 pending = false → “Done! Ready for more!”

"use client"
import { useFormStatus } from "react-dom"

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button disabled={pending}>
      {pending ? "Sending..." : "Send Message"}
    </button>
  )
}

Important Rule!

useFormStatus must be used inside a component that’s inside a form:

function ContactForm() {
  return (
    <form action={sendMessage}>
      <input name="email" />
      <SubmitButton /> {/* ✅ Inside form! */}
    </form>
  )
}

What useFormStatus Gives You:

🎮 useActionState Hook

Sometimes you need more control. Like a game score that updates after each action!

useActionState (formerly useFormState) lets you:

• Track the result of your action
• Show success or error messages
• Keep state between submissions

"use client"
import { useActionState } from "react"
import { createTodo } from "./actions"

function TodoForm() {
  const [state, formAction, isPending] = useActionState(
    createTodo,
    { message: "" } // initial state
  )

  return (
    <form action={formAction}>
      <input name="todo" placeholder="New task" />
      <button disabled={isPending}>
        {isPending ? "Adding..." : "Add Todo"}
      </button>

      {state.message && (
        <p>{state.message}</p>
      )}
    </form>
  )
}

Your server action returns the new state:

"use server"

export async function createTodo(prevState, formData) {
  const todo = formData.get("todo")

  if (!todo) {
    return { message: "Please enter a todo!" }
  }

  await db.todos.add(todo)
  return { message: "Todo added! ✅" }
}

graph TD
    A["Initial State"] --> B["User Submits Form"]
    B --> C["Action Runs on Server"]
    C --> D["Returns New State"]
    D --> E["UI Updates Automatically"]
    E --> B

⚡ useOptimistic Hook

Here’s a superpower: Make your app feel instant!

The Problem: User clicks “Like”… waits… waits… finally sees the like count go up. Boring!

The Solution: useOptimistic shows the change immediately, before the server responds.

It’s like saying: “I’m optimistic this will work, so let’s show it now!”

"use client"
import { useOptimistic } from "react"
import { addLike } from "./actions"

function LikeButton({ initialLikes }) {
  const [optimisticLikes, addOptimisticLike] =
    useOptimistic(initialLikes)

  async function handleLike() {
    // Show +1 IMMEDIATELY!
    addOptimisticLike(optimisticLikes + 1)

    // Then actually save to server
    await addLike()
  }

  return (
    <button onClick={handleLike}>
      ❤️ {optimisticLikes}
    </button>
  )
}

How It Works:

graph TD
    A["User Clicks Like"] --> B["UI Shows +1 Instantly"]
    B --> C["Server Saves Like"]
    C --> D{Success?}
    D -->|Yes| E["Keep Optimistic Value"]
    D -->|No| F["Revert to Original"]

With Forms:

function MessageList({ messages }) {
  const [optimisticMessages, addOptimisticMessage] =
    useOptimistic(messages)

  async function sendMessage(formData) {
    const newMsg = formData.get("message")

    // Show message immediately!
    addOptimisticMessage(prev => [
      ...prev,
      { text: newMsg, sending: true }
    ])

    await saveMessage(formData)
  }

  return (
    <div>
      {optimisticMessages.map(msg => (
        <p style={{ opacity: msg.sending ? 0.5 : 1 }}>
          {msg.text}
        </p>
      ))}

      <form action={sendMessage}>
        <input name="message" />
        <button>Send</button>
      </form>
    </div>
  )
}

🧩 Putting It All Together

Here’s a complete example using all the hooks:

"use server"
// actions.js

export async function addComment(prevState, formData) {
  const comment = formData.get("comment")

  if (!comment?.trim()) {
    return {
      success: false,
      message: "Comment cannot be empty!"
    }
  }

  await db.comments.add(comment)

  return {
    success: true,
    message: "Comment posted!"
  }
}

"use client"
// CommentForm.jsx

import { useActionState, useOptimistic } from "react"
import { useFormStatus } from "react-dom"
import { addComment } from "./actions"

function SubmitButton() {
  const { pending } = useFormStatus()
  return (
    <button disabled={pending}>
      {pending ? "Posting..." : "Post Comment"}
    </button>
  )
}

function CommentSection({ comments }) {
  const [optimisticComments, addOptimistic] =
    useOptimistic(comments)

  const [state, formAction] = useActionState(
    async (prev, formData) => {
      const text = formData.get("comment")

      // Optimistic update
      addOptimistic(prev => [
        ...prev,
        { text, pending: true }
      ])

      return addComment(prev, formData)
    },
    { message: "" }
  )

  return (
    <div>
      {optimisticComments.map((c, i) => (
        <p key={i} style={{
          opacity: c.pending ? 0.6 : 1
        }}>
          {c.text}
        </p>
      ))}

      <form action={formAction}>
        <input name="comment" />
        <SubmitButton />
        {state.message && <p>{state.message}</p>}
      </form>
    </div>
  )
}

🎯 Quick Summary

🌟 Why This Matters

Server Actions make your React apps:

• ⚡ Faster - Less JavaScript in the browser
• 🔒 Safer - Secrets stay on the server
• 🎯 Simpler - No API routes to write
• 🚀 Better UX - Instant feedback with optimistic updates

You’re now ready to build apps that feel lightning fast and bulletproof!

Remember: Server Actions are your kitchen staff. Let them do the heavy lifting while you create amazing user experiences! 🍽️✨