What is the correct method to reload page data when using a server action?

[vedantroy]

When modifying data using server actions--I want to refresh the data on the client page. Currently, it seems like the best way to do this is to have a hidden input element in the form which contains the path to the current page, then inside the serverside action, I can use the path to call revalidatePath (or whatever the method is).

But, this seems somewhat clunky/boilerplate-y. Is there a better way?

[vedantroy]

Also, how do exceptions work in server-side actions? Are they caught and then rethrown on the client?

[bastischulz]

Did you find a better way?

[tomdohnal]

According to the docs, revalidatePath or revalidateTag is the way to go.

Another option that comes to my mind would be to await the server action (when using custom invocation) and then call router.refresh(), but this would only work when you have a custom invocation of your server action in a client component so probably not the best idea given all the constraints.

[santiagoesteva]

Ive setup a modal with a small form to add new item on a list.
The form - client side - invokes server action, which successfully inserts the item in the DB.
Ive been using revalidatePath on the action and redirect to the list route.
This works, sometimes, randomly the list gets updated.
Sometimes, it basically does not.

[robertmalicke]

Same here it's random sometimes it reloads the list sometimes not

[santiagoesteva]

This is currently working for me. The server action "revalidateTag("projects")"and then from the Form Action execution in the client component I redirect passing a query param that changes so NextJS picks up the hint

async function action(formData) {
    await addProject(formData)
  
    // Hack to make the projects page refresh data!
    const random = Math.random()
    redirect(`/projects?${random}`)
  }

[otomir23]

Thats actually better than creating a wrapping client component for form and calling router.refresh() inside onSubmit after executing server action

[dannaz-work]

I found a solution, that works for me. May be it will help you.
Try useTransition()-hook, as it shown in server-actions doc.

Here is small example how you can smoothly update page with server data after client action

'use client';
import { useState, useTransition } from 'react';

import { useRouter } from 'next/navigation';

export const Example = ({ serverDataList }: { serverDataList: string[] }) => {
  const [isPending, setPending] = useState(false);
  const [isTransitionStarted, startTransition] = useTransition();
  const router = useRouter();

  const isMutating = isPending || isTransitionStarted;

  const handlePerformServerMutation = () => {
    setPending(true);
    // update server data here
    //
    // then, start a transition
    startTransition(router.refresh);
    setPending(false);
  };

  return (
    <div>
      <button onClick={handlePerformServerMutation}>Add item</button>
      {isMutating
        ? 'updating...'
        : serverDataList.map((item) => <div key={item}>{item}</div>)}
    </div>
  );
};

[ogzhanolguncu]

You can either redirect like @santiagoesteva said or you can use simply do this

//server-action.ts
"use server";
export const serverAction = async (formData: FormData) => {
    const freshData = await dbCall()
    return freshData;
};

//page.tsx
'use client'
 
<form
     action={async (formData) => {
      const res = await serverAction(formData);
      console.log({ res });
 }}
>

If your goal is to get latest data, you can simply await the server action and get the data out of it.

[revskill10]

How does <form action={} /> work ? Because we don't use event.preventDefault() if user submits the form, then the browser will reload the page automatically ?

[devslife7]

Look into server actions

[greatvivek11]

Not very helpful!!

[enzzoo22]

here: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#convention
The default setting for <form action={} /> does not reload the page

[rei990]

If you simply want to reload on that page after executing the server action, the following method could be implemented simply.

'use client';
import { useRouter } from 'next/navigation';

export function From() {
	const router = useRouter();
	const serverAction = async (formData: FormData) => {
		'use server'
		// ... your server action
	}

	return (
		<form
			action={async FormData => {
				await serverAction(FormData);
				router.refresh()
			}}
		>
			<TextInput id="name" label="name"/>
			<TextInput id="slug" label="slug"/>
			<SubmitButton/>
		</form>
	);
}

[Toissincera]

I am sorry, all of these solutions are just band aids, because why is it so difficult to just, reload a Server Component with new data. I thought revalidatePath("/same/url") works. It doesn't. Nor does windows.location.reload at least not in like a separate actions.jsx "user server" file

[juanpasolano]

I agree, I really don't understand why I need to reload the page (making a bunch of other requests I don't need at that point) or make my server action return the data I need, I may not need the same data always, coupling things that should not be coupled.
I feel like I need to force all these work arounds that seem just meh.

[Angeloem]

Plus, the complexity increases when you are getting real time data and want to update from the server actions.

[issam-seghir]

I've tried all the solutions and workarounds mentioned, but nothing works for me. How can I convince my client that he need to click the browser reload button to see the new data? What a frustrating framework!

[dannaz-work]

I finally solved all my cache issues by setting staleTimes to 0 in next.conf.js.

experimental: {
    staleTimes: {
      dynamic: 0,
      static: 0,
    },
  },

It's obviously not the best and rightest solution, but for me it works.