Reputation: 1499
The index page uses "getInitialProps" to load data. Then we create a dialog which can create a new data. After creating a new data, the current page should be reloaded.
We use Router.replace('/')
to reload the page. But it triggers a server-side rendering.
What we need is a client-side reload. The "getInitialProps" function should be called in the browser. So, how to do the client-side reload?
Upvotes: 44
Views: 154330
Reputation: 31
I'm using NextJS 14 with app router. As the earlier solutions suggested
import { useRouter } from "next/navigation";
export default function Component(){
const router = useRouter();
//this will reload the page without doing SSR
router.refresh();
}
Couldn't find asPath
, it doesn't exist.
In my case plain window.location.reload()
worked for me perfectly fine. It only reloaded the client and not the server.
Upvotes: 2
Reputation: 151
Just use window.location.reload()
if you want to refresh on a client side in nextjs version 13.
Upvotes: 15
Reputation: 519
If you're using AppRouter and need to force refresh, you can use follow code.
router.push(window.location.href);
router.refresh();
Upvotes: 4
Reputation: 4290
A better option is to use router.replace(router.asPath)
replace does not create a new history item so Back button works as expected
Details explained in this article https://www.joshwcomeau.com/nextjs/refreshing-server-side-props/
import { useRouter } from "next/navigation";
export default function Component(){
const router = useRouter();
router.replace(router.asPath);
}
Upvotes: 22
Reputation: 607
as of of NextJs 13 Being released the new router Object has the refresh()
method, which allows you to refresh ( re-fetch ) the data client-side only without having to do a full page reload.
it can be used like the following :
import { useRouter } from "next/navigation";
export default function Component(){
const router = useRouter();
//this will reload the page without doing SSR
router.refresh();
}
Please keep in mind that this is feature of NextJs 13 Which is currently in beta.
check the beta docs here
credits to fireship for showing the feature
https://www.youtube.com/watch?v=__mSgDEOyv8
Upvotes: 29
Reputation: 301
It may help someone, If you are using nextjs Link its actually preloades page if you need default reload you need to use a tag not a Link
Upvotes: 1
Reputation: 5523
Assume, a user is on the
http://www.example.com/profile
the user has edited the profile and for some reason, you need to reload the same page.
If your case is similar to this, you could use Router.reload();
Remember, you must import Router object like this import Router from "next/router";
For more information: https://nextjs.org/docs/api-reference/next/router#routerreload
Upvotes: 32
Reputation: 345
Didn't see an answer that was really what I was looking for,
this worked for me:
import Router from 'next/router'
Router.reload(window.location.pathname);
Upvotes: 14
Reputation: 4230
Running the following code
pages/index.js
import Router from 'next/router';
function Index({ isServer }) {
console.log('render', new Date());
return (
<div>
<h1>Home page. Is it on server? - {isServer ? 'Yes' : 'No'}</h1>
<button type="button" onClick={() => Router.push('/')}>
Reload me
</button>
</div>
);
}
Index.getInitialProps = async ({ req }) => {
return { isServer: !!req };
};
export default Index;
I can see that it console.log
s render only once on the server even after clicking "Reload me". I can see that isServer
equals to false after "reload" as well.
How do you exactly reload the page so you see it is rendered on server side?
PS
Here are screenshots:
Upvotes: 2