Hi. I have a simple page that lists a db table:

async function fetchRoutines(userId) {
    return await prisma.workoutPlan.findMany({
      where: {
        userId: userId,
      },
      select: {
        id: true,
        name: true,
      }
    });
}
export default async function RoutinesPage() {
  const routines = await fetchRoutines(session.user.id);
    return ( bla bla )
}

in a client/child component i'm handling deleting entries with a button. when the delete is successful the item is removed from the db but it isn't shown in the page, I have to refresh the browser manually. how can i handle this gracefully?