On the server side of my route /your-data, I load data from the database which is then passed as required to child elements.
I have a form within a child element which updates some of the loaded data in the datbase, on completion it calls a refresh. The data from the server doesn't get reloaded, unless I manually refresh the page.
Due to the non-dynamic url I know I shouldn't use the revalidatePath function.
How do I get the server side data to reload the new data from within the code?
I have tried useRouter().refresh()
Answer
If you're using getServerSideProps (SSR): When you navigate or refresh the page, it already hits the server fresh every time.
But if you're navigating via next/link or router.push(), it’s a client-side transition, so it won’t call getServerSideProps again by default.
Force a reload from client:
router.replace(router.asPath);
This re-triggers SSR (getServerSideProps) but doesn’t add a new entry to the browser history.
Make sure you’ve got the router:
import { useRouter } from 'next/router';
const router = useRouter();