Next.js: router.push 不刷新页面

Question

I'm building a next.js page /page/data/[dataId] (this page is navigated when A user clicks on a link from page /page/data , I fetch the list of items through an API ).

When user clicks on a button, I call an API to delete this item from DB. Once the API call is successful. I need to redirect user back to /page/data page. Here's how I'm doing it:

 async function removeData(){

    // ... some logic

    await removeData({input});
    setTimeout(()=>{
          router.push("/page/data"); // redirecting to parent
     },2000)

}

Once the user is redirected back to /page/data/ I need to refresh the list of data items bacause I want to remove the item which got deleted. Now the problem is - The /page/data/ is not getting refreshed after navigating it through router.push .

I know we can achieve this by replacing router.push to window.location="/page/data" but that is very expensive way.

I also tried:

router.push("/page/data",undefined,{shallow:false})

but it didn't work.

Anyone can you help me how can we achieve this in optimal way? I find window.location approach too expensive.

Answer 1

After deleting an item from DB you can try to update your local data instead of fetching it from the server

Answer 2

I have used this method in the past, like you say it may be an expensive approach but it keeps the routing without 'next router' compared to moving part of the routing to window.location .

router.push('ROUTE').then(() => window.location.reload())

Next router also has a reload function that could be called, but it still uses the principles of after the route.

router.push('ROUTE').then(() => router.reload())