Updating Data in Next.js – Server Functions, Actions, and UI Revalidation

What Are Server Functions?

Server Functions are asynchronous functions that run on the server and can be invoked from the client. In mutation contexts, they’re called Server Actions. They integrate with Next.js caching and are triggered via formAction, action, or startTransition. Only POST requests can invoke them.

Creating Server Functions

Use the 'use server' directive to mark a function as server-side. You can place it inside a function or at the top of a file:

// app/lib/actions.ts
export async function createPost(formData: FormData) {
  'use server'
  const title = formData.get('title')
  const content = formData.get('content')
  // Update data and revalidate
}

Using Server Functions in Server Components

You can inline Server Functions directly in Server Components:

// app/page.tsx
export default function Page() {
  async function createPost(formData: FormData) {
    'use server'
    // ...
  }
  return <></>
}

Invoking Server Functions in Client Components

Client Components can’t define Server Functions, but they can import and invoke them:

// app/ui/button.tsx
'use client'
import { createPost } from '@/app/actions'

export function Button() {
  return <button formAction={createPost}>Create</button>
}

Passing Actions as Props

// app/client-component.tsx
'use client'
export default function ClientComponent({ updateItemAction }) {
  return <form action={updateItemAction}>...</form>
}

Invoking Server Functions

• Forms: Use action or formAction to submit data.
• Event Handlers: Use onClick or useEffect to trigger updates.

Example with Form

// app/ui/form.tsx
import { createPost } from '@/app/actions'

export function Form() {
  return (
    <form action={createPost}>
      <input name="title" />
      <input name="content" />
      <button>Create</button>
    </form>
  )
}

Example with onClick

// app/like-button.tsx
'use client'
import { incrementLike } from './actions'
import { useState } from 'react'

export default function LikeButton({ initialLikes }) {
  const [likes, setLikes] = useState(initialLikes)
  return (
    <>
      <p>Total Likes: {likes}</p>
      <button onClick={async () => {
        const updatedLikes = await incrementLike()
        setLikes(updatedLikes)
      }}>
        Like
      </button>
    </>
  )
}

Showing a Pending State

Use useActionState to show a loading indicator while the Server Function is running:

// app/ui/button.tsx
'use client'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
  const [state, action, pending] = useActionState(createPost, false)
  return (
    <button onClick={() => startTransition(action)}>
      {pending ? <LoadingSpinner /> : 'Create Post'}
    </button>
  )
}

Revalidating Cache

Use revalidatePath or revalidateTag to refresh cached data after updates:

// app/lib/actions.ts
import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
  'use server'
  // Update data
  revalidatePath('/posts')
}

Redirecting After Update

Use redirect to navigate after a mutation:

// app/lib/actions.ts
'use server'
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

export async function createPost(formData) {
  // Update data
  revalidatePath('/posts')
  redirect('/posts')
}

Managing Cookies

Use the cookies API inside Server Actions to get, set, or delete cookies:

// app/actions.ts
'use server'
import { cookies } from 'next/headers'

export async function exampleAction() {
  const cookieStore = await cookies()
  cookieStore.set('name', 'Delba')
  cookieStore.delete('name')
}

Using useEffect to Trigger Server Actions

Use useEffect to trigger updates on mount or dependency change:

// app/view-count.tsx
'use client'
import { incrementViews } from './actions'
import { useState, useEffect, useTransition } from 'react'

export default function ViewCount({ initialViews }) {
  const [views, setViews] = useState(initialViews)
  const [isPending, startTransition] = useTransition()

  useEffect(() => {
    startTransition(async () => {
      const updatedViews = await incrementViews()
      setViews(updatedViews)
    })
  }, [])

  return <p>Total Views: {views}</p>
}

Conclusion

Server Functions in Next.js make it easy to update data, revalidate cache, and reflect changes in the UI—all with minimal client-side complexity. Whether triggered by forms, buttons, or lifecycle hooks, these actions help keep your app fast, interactive, and consistent.