CodePark/ questions / Server Actions
START PRACTICINGPRACTICE
Frontend question · Next.js › Server Actions

After a Server Action changes data, how do you make the UI show the new data?

Revalidate inside the action. Next.js does not refresh rendered pages or cached data by itself.

Inside the action, call:

  • revalidatePath for the routes that show the data, or
  • revalidateTag for tagged fetches.

Next.js then sends the updated RSC payload (the compact description of the rendered Server Component tree) back in the same response. The current page updates without a reload.

If the user should land on another page, call redirect() after revalidating. redirect() throws, so put it last, outside any try/catch.

For instant feedback, use React's useOptimistic in a Client Component. It shows the expected result while the action runs, like a new comment appearing at once. When the action ends, React replaces the optimistic state with the real state. This happens on success and on failure. So on failure the optimistic change disappears.

From the client, router.refresh() fetches the current route's Server Components again. But it does not clear the Data Cache.

  • Call revalidatePath or revalidateTag inside the action.
  • The updated UI comes back in the same round trip.
  • Call redirect() after revalidating, outside try/catch.
  • useOptimistic gives instant feedback while the action runs.
  • When the action ends, success or failure, the real state replaces the optimistic state.
  • router.refresh() re-renders the route but doesn't clear the Data Cache.