Say you have a simple task model: ID, name, description etc, you want to display a list of the task names on the main page, and when you click one it opens a modal showing all the info and lets you perform crud on the details. so you fetch the simple task view just including ID and name in your server component and map through them in your main page. Since you don't want a modal element for every item you make a single modal component outside of the map, when the user clicks the task item you set an active task id state so you can pass the id into the modal component, the modal component then uses this ID to perform a fetch using a server action and return the data in the modal.

This works great and keeps the page load fast since we don't need to fetch all of the task data on page load. the alternative would be to fetch all of the task data and just pass the active task data to the modal but imo this is less efficient and scalable.

What i'd like advice on is how to correctly reflect changes in the task data modal when CRUD is performed on the data.

Here's what i'm doing currently: when i perform crud i also use revalidatePath which successfully re-triggers the fetch (from prisma in this case). it successfully fetches the simple tasks and they are reflected in the main page.

Because the modal component is only being passed a task ID it doesn't know that any data has changed so it doesn't trigger the server action to fetch again so the data in the modal does not update until we close and reopen the modal.

I have no idea how i can make the expanded task data from the server action fetch or invalidate again. maybe using revalidateTag on the prisma fetch which im going to try now.

maybe my whole approach is wrong but any ideas on how to implement this in a next way would be greatly appreciated.

relevant stack: next14, prisma