Next.js 16 App Router: Mastering Server Actions and Revalidation Patterns

We've been refactoring a full-stack dashboard platform recently, and moving away from traditional client-side data fetching to Next.js App Router Server Actions has been a massive shift in how we structure component trees.

One pattern that took some trial and error to get right is handling optimistic UI updates alongside database mutations without causing layout shifts or race conditions with Prisma cache invalidation.

When a user triggers a resource update from a child component, we rely heavily on React's useTransition combined with revalidatePath:

~/ code

// Example server action structure
'use server'
import { revalidatePath } from 'next/cache'
import prisma from '@/lib/prisma'
~/ code
export async function updateResourceData(id: string, newTitle: string) {
  try {
    await prisma.script.update({
      where: { id },
      data: { title: newTitle }
    })
    revalidatePath('/vault')
    return { success: true }
  } catch (error) {
    return { success: false, error: 'Database mutation failed' }
  }
}</code></pre><br/>
How are you guys structuring your error boundaries and form feedback states when dealing with nested mutations? Would love to see how others handle clean separation of concerns.