how to use router.refresh() for client components | Next.js | Page 1

#

Hi @glacial stag. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The router.refresh() function in Next.js is used to manually refresh a route. This completely clears the Router Cache, and makes a new request to the server for the current route. It does not affect the Data or Full Route Cache. The rendered result will be reconciled on the client while preserving React state and browser state.

Here is an example of how to use router.refresh() in a client component:

import { useRouter } from 'next/router'
 
export default function Page() {
 const router = useRouter()
 
 return (
 <button type="button" onClick={() => router.refresh()}>
 Click here to refresh
 </button>
 )
}

In this example, when the button is clicked, the router.refresh() function is called, which triggers a refresh of the current route.

Please note that router.refresh() could re-produce the same result if fetch requests are cached. Other dynamic functions like cookies and headers could also change the response.

Sources:

Next.js Documentation (https://nextjs.org/docs/app/building-your-application/caching#routerrefresh)
Next.js API Reference (https://nextjs.org/docs/app/api-reference/functions/use-router#userouter)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@glacial stag kapa.ai is still learning and improving, please let us know how it did by reacting below

#how to use router.refresh() for client components

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: