Jim Jin
Jim Jin

Reputation: 1499

Trigger client-side reload in next.js

Scenario

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.

Problem

We use Router.replace('/') to reload the page. But it triggers a server-side rendering.

Question

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

Answers (9)

Shyan Roy Choudhury
Shyan Roy Choudhury

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

ARIF ALAM
ARIF ALAM

Reputation: 151

Just use window.location.reload() if you want to refresh on a client side in nextjs version 13.

Upvotes: 15

HC0215
HC0215

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

Amit
Amit

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

Abdullah Osama
Abdullah Osama

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

Dilshod Sh
Dilshod Sh

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

S.Saderi
S.Saderi

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

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

iurii
iurii

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.logs 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

Related Questions