In nextj15, router.refresh after router.back doesnt update the server component data
Server Component -> '/projects'
Child Client Component -> '/projects/edit'
'/projects' route should ideally be updated with latest data after succesful edit api request and closing of modal
- if router.back (closing edit modal) and router.refresh are called one after the other, the server component doesnt update. using router.refresh after a setTimeout works
- is there a better way to go about it this without setTimeout?? and without modifying history with push or replace?
'/projects' route -> Server Component
- fetches projects and lists them as cards
'projects/edit' Edit Modal (Client Component)
- renders a modal to edit the project details
const onSubmit = async (data: { name: string; description: string }) => {
try {
if (type === 'add') {
await handleCreate(data);
} else if (type === 'edit' && projectId) {
await handleUpdate({ projectId, ...data });
}
// router.refresh without setTimeout doesnt work
setTimeout(() => {
router.refresh();
}, 100);
} catch (error) {
console.log(error);
}
};
Hook
export function useUpdateProject() {
const { setLoading } = useLoading();
const router = useRouter();
const handleUpdate = async ({ projectId, name, description }: { projectId: string; name: string; description: string }) => {
setLoading(true);
try {
await updateProject({ projectId, name, description });
// closes modal
router.back();
} catch (err: any) {
console.log(err)
} finally {
setLoading(false);
}
};
return { handleUpdate };
}
Service
fetchProjects -> cache:no-store is passed as header
updateProject -> cache:no-store is passed as header3 Replies
What’s your caching rendering strategy?
You propably want to use revalidatePath() in your api/serveraction
@Xanacas hi, thanks for the reply. i am using API route handlers instead of server actions. should i do revalidatePath after the API request is successful?
You need todo this within the api endpoint.
Or you need to force dynamic/ disable SSR for this page.