How do I refresh the page in next.js 14 app router?

[qjrjsel]

Currently using next.js 14 app router.

Modal window on the client-side (the page is the "/" page.)

When logging in is completed. I would like to close the opened login modal window by refreshing the page.

Currently, the router.refresh() method is used using useRouter, but the refresh itself does not work.

What's the problem? I searched and found useRouter.

 import { useRouter } from 'next/router';

It says to use router.reload() after importing like this, but if you do this, the import itself will not work at all.

How can I refresh the page after receiving data?

- my code (use client)

import { useRouter } from 'next/navigation';


  const apiCallHandler = async () => {

    const res = await fetch(fetch infos);

    const data = await res.json();

    if (success) {

      await asyncFn();

      router.refresh(); // it not works

    }
  };

I'm currently using window.location.reload() as a temporary measure, but I'm leaving a post because I don't think this is the normal method.

[icyJoseph]

It is perfectly fine to use window.location.reload.

As for the router.refresh method, let's look at the docs, https://nextjs.org/docs/app/api-reference/functions/use-router#userouter:

router.refresh(): Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. useState) or browser state (e.g. scroll position).

and from, https://nextjs.org/docs/app/building-your-application/caching#routerrefresh:

The refresh option of the useRouter hook can be used to manually refresh a route. This completely clears the Router Cache, and makes a new request to the server for the current route. refresh 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.

So while, perhaps the name is a bit mislead, it is far from a full page refresh method. The browser API already has a method for that.

If you wanna take a deep dive into Caching and Revalidating in the App Router, check out this discussion thread: #54075

[kasir-barati]

Worked but introduced another problem 😅. Now I loss my notifications and cannot see them due to the loss of Redux state 🥲.

[emporteme]

It worked. Thank you

[emporteme]

It worked. Thank you

router.back();
// router.refresh()
setTimeout(() => {
window.location.reload();
}, 100);

[ronny1020]

What can I do if I don't want to reload the whole web such as the layout on the client side?

[tgoodness]

This works for me!

Make the route that needs a refresh an optional route parameter like below

[[...slug]]

refresh the page by navigating to the same route with a different refreshId

import { useRouter } from 'next/navigation';

router.push(``/home?refreshId=${new Date().getTime()}`)

[markudevelop]

router.refresh works fine but you need invalidate the cache first.

[martinharyanto]

and how can we do this?

[shubhamkashyapdev]

but router.refresh() is not triggering the server-side call