Hi Everyone,

I'm working on an application where users can create "Projects" and those projects can have multiple "Children". Those Children have content/metadata that is editable by the user. Users must be authenticated in order to access and edit their data. To do this, I'm using NextAuth.js and Prisma.

On the page in the attached screenshot you can see a input field where a user can edit the title of a Project Child and a list containing the Children within a Project. When a user edits the title on the right the list on the left should update and reflect the change.

The two components--the input component and the list component--get their data back from the results of getServerSideProps at the page level. When a user edits the title, a request is made to an API route with the update. If this update is successful I run the following code to cause the page to refetch the updated data.

  const handleRefresh = () => {
    router.replace(router.asPath);
  };

I've looked at the Next.js docs and have scoured Stack Overflow but haven't found anything more "official" than the above snippet.

Is this the best way to fetch new page data after a client-side mutation happens?
Should I refactor my page to handle fetching the data in a way that doesn't require the page reload?