How to force a page refresh in Next.js

To refresh a page in Next.js with the App Router, call router.refresh() from the useRouter hook in next/navigation. It asks the server for the current route again, re-renders the Server Components, and merges the result into the page without throwing away the browser document. If you want the browser to reload the page from scratch instead, call window.location.reload().

useRouter is a hook, so it only works in a Client Component:

'use client'

import { useRouter } from 'next/navigation'

//...

const router = useRouter()

router.refresh()

Call it from an event handler or inside useEffect, not in the component body while React is rendering. For more on programmatic navigation with the same hook, see how to use the Next.js Router.

Soft refresh vs full reload

router.refresh() keeps the client tree mounted, so useState values and the scroll position survive. What changes is the server part: Next.js fetches the current route again and swaps in the new Server Component output.

One thing it does not do is clear the server-side cache. A fetch() you cached with cache: 'force-cache' returns the same data after a refresh. To throw that away, call revalidatePath() or revalidateTag() in a Server Action.

Sometimes you really need a full browser reload, like after a logout when everything is out of sync. Then use the browser API:

window.location.reload()

That resets component state, in-memory caches, and third-party scripts, and it also loses form inputs and scroll position. It’s a heavy tool.

Remember that window.location.reload() only works in the browser. During server rendering there’s no window, so calling it there fails.

Pages Router (older apps)

On the Pages Router, useRouter comes from next/router, and a full reload is router.reload(). It takes no arguments and under the hood calls window.location.reload():

import { useRouter } from 'next/router'

const router = useRouter()
router.reload()

Sometimes you can’t use the hook, for example in a utility function that is not a React component. In that case, import the global Router object:

import Router from 'next/router'

Router.reload()

The App Router has no global router object like this, there you pass the router you got from useRouter() down to the function that needs it.

For a soft refresh of getServerSideProps data without a full reload, navigate to the current URL:

router.replace(router.asPath)

router.asPath is the current URL as shown in the browser. Navigating to it makes Next.js call getServerSideProps again and render the page with the new props, while React stays mounted.

I used replace() instead of push() here on purpose. push() would add a new entry to the browser history, and pressing back would return to the same page. replace() swaps the current entry, which is what you want for a refresh.

Want me to talk about your product? You can sponsor this site.