Trigger client-side reload in next.js

node.js next.js
Jim Jin picture Jim Jin · Dec 12, 2018 · Viewed 32k times · Source

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?

Answer

Sajad Saderi picture Sajad Saderi · Apr 26, 2020

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

Related questions

Cannot use import statement outside modules

I am using NextJS with typescript, mongo Atlas, mongoose, node and express. I am getting the following error when I run node pages/server: I have uploaded my package.json file and have added babel as well import express from …

Read More
Next.js return the 404 error page in getInitialProps

Currently I am following this example on how to redirect users in getInitialProps https://github.com/zeit/next.js/wiki/Redirecting-in-%60getInitialProps%60 The problem is, if I want to return 404 like this, it will return a blank page instead of …

Read More
Next.js pass NODE_ENV to client

I'm building a React SSR App, using Next.js. I want to be able to access the NODE_ENV on the client side, as this will tell my app which API endpoints to use. I'm struggling to find a decent …

Read More