Beyond Traditional Client Fetching

For years, React developers wrote `useEffect`, created `fetch()` wrappers, managed loading spinners, and synced query caches with external stores.

Server Actions: Mutations as First-Class Citizens

Server Actions allow you to define server-executed functions that can be invoked directly from forms or client transitions:

// app/actions.ts

export async function createBlogPost(prevState: any, formData: FormData) { const title = formData.get('title') as string; await db.post.create({ data: { title } }); revalidatePath('/blogs'); return { success: true }; } ```

Form Submission with `useActionState`

'use client'
import { useActionState } from 'react';

export function CreateBlogForm() { const [state, formAction, isPending] = useActionState(createBlogPost, null);

return ( <form action={formAction}> <input name="title" required /> <button disabled={isPending}> {isPending ? 'Publishing...' : 'Publish'} </button> </form> ); } ```

Automatic Revalidation

With `revalidatePath`, Next.js purges the server cache for that route and automatically streams the updated Server Component payload back to the client. Zero stale client caches, zero manual refetches!

TAGS:#React 19#Server Actions#Data Fetching