Server Actions vs tRPC — Stale UI After Mutation

'use server';
import { revalidateTag } from 'next/cache';
import { db } from '@/lib/db';
import { z } from 'zod';

const UpdateStockSchema = z.object({
  productId: z.string().uuid(),
  quantity: z.number().int().min(0)
});

export async function updateStock(prevState: any, formData: FormData) {
  const parsed = UpdateStockSchema.safeParse({
    productId: formData.get('productId'),
    quantity: Number(formData.get('quantity'))
  });
  if (!parsed.success) return { error: parsed.error.flatten() };
  await db.inventory.update({ where: { productId: parsed.data.productId }, data: { quantity: parsed.data.quantity, updatedAt: new Date() }});
  revalidateTag('inventory');
  return { success: true };
}

import { z } from 'zod';
import { createTRPCRouter, protectedProcedure } from '../trpc';
import { TRPCError } from '@trpc/server';

export const inventoryRouter = createTRPCRouter({
  getByProduct: protectedProcedure.input(z.object({ productId: z.string().uuid() })).query(async ({ ctx, input }) => {
    const inv = await ctx.db.inventory.findUnique({ where: { productId: input.productId }});
    if (!inv) throw new TRPCError({ code: 'NOT_FOUND' });
    return inv;
  }),
  updateStock: protectedProcedure.input(z.object({ productId: z.string().uuid(), quantity: z.number().int().min(0) })).mutation(async ({ ctx, input }) => {
    return ctx.db.inventory.update({ where: { productId: input.productId }, data: { quantity: input.quantity, updatedAt: new Date() }});
  })
});

'use client';
import { api } from '@/trpc/react';
import { updateStock } from '@/app/actions/inventory';
import { useActionState, useOptimistic } from 'react';

export default function Dashboard() {
  const { data: lowStock } = api.inventory.listLowStock.useQuery({ threshold: 10 });
  const [optimistic, addOptimistic] = useOptimistic(lowStock, (s, u) => s.map(i => i.productId === u.id ? { ...i, quantity: u.qty } : i));
  const [state, formAction] = useActionState(updateStock, null);
  return (
    <ul>
      {optimistic?.map(item => (
        <li key={item.productId}>
          {item.product.name} - {item.quantity}
          <form action={async (fd) => { addOptimistic({ id: item.productId, qty: Number(fd.get('quantity')) }); await formAction(fd); }}>
            <input type='hidden' name='productId' value={item.productId} />
            <input type='number' name='quantity' defaultValue={item.quantity} />
            <button>Update</button>
          </form>
        </li>
      ))}
    </ul>
  );
}

export const BENCHMARKS = {
  singleMutation: { serverAction: '45ms', trpc: '50ms', delta: '5ms' },
  eightQueries: { withoutBatch: '496ms', withBatch: '68ms', improvement: '7.3x' },
  cached: { first: '120ms', cached: '0ms', serverAction: '120ms' }
};