Server Actions v Next.js 14

Server Actions představují revoluční způsob práce se serverovým kódem přímo ve vašich komponentách. Přinášejí jednodušší a bezpečnější způsob manipulace s daty.

Progressive Enhancement

Formuláře fungují i bez JavaScriptu, zajišťující lepší dostupnost

Optimistic Updates

Okamžitá odezva UI s automatickým rollback při chybě

Type Safety

Plná TypeScript podpora napříč client-server boundary

Bundle Size

Menší JS bundle díky odstranění API vrstvy

Implementace Server Actions

Server Actions můžeme implementovat dvěma způsoby: jako samostatné funkce nebo přímo v komponentách. Každý přístup má své výhody.

Samostatné Server Action

Samostatné Server Actions jsou ideální pro znovupoužitelnou business logiku a komplexnější operace:

app/actions.ts
'use server'

import { z } from 'zod'
import { revalidatePath } from 'next/cache'

const TodoSchema = z.object({
  title: z.string().min(1).max(100),
  completed: z.boolean().default(false),
})

export async function addTodo(formData: FormData) {
  const result = TodoSchema.safeParse({
    title: formData.get('title'),
    completed: formData.get('completed') === 'true',
  })

  if (!result.success) {
    return { error: 'Neplatná data' }
  }

  try {
    await prisma.todo.create({
      data: result.data,
    })
    
    revalidatePath('/todos')
    return { success: true }
  } catch (error) {
    return { error: 'Chyba při ukládání' }
  }
}

Server Action v komponentě

Inline Server Actions jsou vhodné pro jednodušší operacespecifické pro danou komponentu:

app/todos/page.tsx
export default function TodoList() {
    async function deleteTodo(id: string) {
      'use server'
      await prisma.todo.delete({ where: { id } })
      revalidatePath('/todos')
    }

    return (
      <form>
        {todos.map(todo => (
          <button
            key={todo.id}
            formAction={async () => {
              await deleteTodo(todo.id)
            }}
          >
            Smazat
          </button>
        ))}
      </form>
    )
  }

Optimistické aktualizace

Pro lepší UX můžeme implementovat optimistické aktualizace pomocí useOptimistic hooku. Tento přístup zajišťuje okamžitou odezvu UI s automatickým rollback při chybě.

app/todos/optimistic.tsx
'use client'

import { useOptimistic } from 'react'
import { addTodo } from './actions'

export function TodoForm() {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  )

  async function action(formData: FormData) {
    const title = formData.get('title')
    
    // Optimistická aktualizace
    addOptimisticTodo({ 
      id: 'temp',
      title,
      completed: false 
    })
    
    // Skutečné uložení
    await addTodo(formData)
  }

  return (
    <>
      <form action={action}>
        <input name="title" />
        <button type="submit">Přidat</button>
      </form>

      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </>
  )
}

Error Handling

Proper error handling je klíčový pro robustní aplikace. Server Actions nám umožňují elegantně zpracovávat chyby na obou stranách:

app/error-handling.tsx
'use client'

import { useFormState } from 'react-dom'

const initialState = { message: null, errors: {} }

function TodoForm() {
  const [state, formAction] = useFormState(addTodo, initialState)

  return (
    <form action={formAction}>
      <input name="title" />
      {state.errors?.title && (
        <div className="text-red-500">{state.errors.title}</div>
      )}
      <button type="submit">Přidat</button>
      {state.message && (
        <div className="text-green-500">{state.message}</div>
      )}
    </form>
  )
}

⚠️ Na co si dát pozor

Vždy validujte vstupní data na serveru
Implementujte proper error handling
Používejte TypeScript pro type safety
Nezapomeňte na rate limiting u kritických operací

Závěr

Server Actions představují významný krok vpřed v oblasti vývoje webových aplikací. Kombinují jednoduchost použití s výkonem a bezpečností. Díky integraci přímo do React komponent a podpoře pro optimistické aktualizace můžeme vytvářet rychlejší a uživatelsky příjemnější aplikace s méně kódem.

Pro další informace doporučuji prostudovat oficiální dokumentaci Next.js a experimentovat s různými use cases ve vašich projektech.

Server Actions v Next.js 14