Router cannot refresh page if url has anchor

[1aerostorm]

Describe the feature you'd like to request

I need to refresh current page with calling getServerSideProps, but without reloading whole page (router.reload, window.location.reload).

Router has no special method for that, so I using:

this.props.router.replace(this.props.router.asPath, undefined, {
    scroll: false
})

But if current page url has #anchor, reload do not works.

Describe the solution you'd like

Some option to "force" push/replace.

Describe alternatives you've considered

Current workaround is:

1. Preserve the anchor hash - it will be removed:

const asPath = this.props.router.asPath
const [ path, hash ] = asPath.split('#')

2. Go to path without anchor hash:

const reloadOptions = {
    scroll: false
}
this.props.router.replace(path, undefined, reloadOptions)

3. And reload it again!

if (hash) {
    this.props.router.replace(path, undefined, reloadOptions)
    ...
}

4. Restore the hash:

    window.location.hash = '#' + hash;

[DanielBailey-web]

This is more of a workaround that is better than your current method. (In my opinion of course)
You could use a fetching data library like SWR also by Vercel.

useSWR('/api/data', fetcher, { fallbackData: prefetchedData })

Where prefetched data would be the applicable props from getServerSideProps
And then just have an api page that calls the same internal code as getServerSideProps and returns the applicable props.

When you need to update it, you can just call mutate. It will also automatically re-fetch it on window focus after a few seconds (by default)

Here's a link to client side rendering.
https://nextjs.org/docs/basic-features/data-fetching/client-side

[stefan-girlich]

Issue still exists with router.refresh() in Next.js 14.2.14 using app router.