Trouble getting the UI to show the newly created record

Hello everyone,

I’m implementing a client management route in Next.js (/dashboard/customersSICC) and I’m having trouble getting the UI to show the newly created record immediately after creating a client. Here’s what I have so far:
The creation form (excerpt):

... Create Client The server action createCustomerSICC: export async function createCustomerSICC(formData: FormData) { const name = String(formData.get('name') || ''); const body = { status: formData.get('status'), name, CUIT: formData.get('CUIT'), contacto: formData.get('contacto'), mail: formData.get('mail'), tel: formData.get('tel'), mailNotif: formData.get('mailNotif'), urlSlug: slugify(name), }; const response = await fetch(`${DIRECTUS_URL}/items/Clientes`, { next: { revalidate: 0 }, method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }); const data = await response.json().catch(() => ({})); const id = data?.data?.id as string | undefined; revalidateTag('customersSICC'); revalidatePath('/dashboard/customersSICC'); revalidatePath('/', 'layout'); if (id) { return redirect(`/dashboard/customersSICC/success?id=${id}`); } return redirect('/dashboard/customersSICC'); } After creation, it navigates to /dashboard/customersSICC/success where a custom link returns to the list: Back RefreshLink executes router.push(href) followed by router.refresh(): 'use client'; import { useRouter } from 'next/navigation'; import { useCallback, startTransition } from 'react'; import Link from 'next/link'; export default function RefreshLink({ href, className, children, }: { href: string; className?: string; children: React.ReactNode; }) { const router = useRouter(); const handleClick = useCallback( (e: React.MouseEvent) => { e.preventDefault(); router.push(href); startTransition(() => { router.refresh(); }); }, [router, href], ); return ( {children} ); } The client listing is a dynamic server component (export const dynamic = 'force-dynamic') and triggers a refresh when mounted: export const dynamic = 'force-dynamic'; ... ... ClientRefresher simply calls router.refresh() inside useEffect: 'use client'; import { useEffect } from 'react'; import { useRouter } from 'next/navigation'; export default function ClientRefresher() { const router = useRouter(); useEffect(() => { router.refresh(); }, [router]); return null; } Problem Despite using revalidateTag and revalidatePath in the server action, and calling router.refresh() when returning to the list, the newly created client doesn’t appear until I manually refresh the page (Ctrl+R/F5). I’m using Next.js 15.4.0-canary with incremental PPR, and I’m fetching data without caching: const res = await fetch(url, { cache: 'no-store', next: { tags: ['customersSICC'], revalidate: 0 }, }); Do you have any ideas why the UI doesn’t update immediately after creating the client? Is there something I’m missing regarding router.refresh, revalidatePath, or PPR handling? Thanks in advance for any suggestions! hcamusso1166/Nextjs_sicc_mvp

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.