Force Reload Next.js Pages

In some circumstances, you might need to force refresh a page, maybe you have data that needs to be fetched from the server but aren't using a Stale While Revalidating method. For example a user profile page, where a user might update a password or email.

Prefer a video? Check below

%[https://youtu.be/ouEPm91TlTI]

When in a component

When you are in a component, Next.js has the useRouter hook that allows you to, well, hook into the router functionality. When using the hook you can do the following

import { useRouter } from 'next/router';

export default function myComponent() {
    const router = useRouter();

    router.reload();
}
javascript

When you aren't in a component

There are on occasion where you might be out of a component, such as a utility or something similar. You can still force the reload, but you can't use the hook to do this. Instead you can still use the router functionality:

import Router from 'next/router';

Router.reload();
javascript

This will force the reload but without the hook, allowing you to do it wherever you need it outside of component function.

James Perkins

James is a developer advocate, who helps developers understand the Jamstack, and how it can be used to build a faster web.

Leave a Comment

0 comments
    HomeBlogAnalytics

    © 2022 James Perkins. All rights reserved

    Powered by TinaCMS