Next.js Discord

Discord Forum

Correct way to refresh page data fetched with `getServerSideProps` after client-side mutation?

West African Lion posted this in #help-forum
Open in Discord
West African LionOP
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 = () => {

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?

3 Replies

West African LionOP
Bump. Would love to see how others are handling this!
I would use trpc or just react-query to handle that if I use page router
or put the data from getServerSideProps to a useState hook then set the new data after mutation