I have a list of records that are being pulled out of a database and rendered inside a server component. I also have a client component that creates a new record. When the new record is created I want the server component to update showing the newly added record. I'm following a Frontend Masters course for this.

To try and achieve this I'm using revalidatePath insdie of my route handler for the route that creates a new record:

import { getUserByClerkID } from "@/utils/auth";
import { prisma } from "@/utils/db";
import { revalidatePath } from "next/cache";
import { NextResponse } from "next/server";

export const POST = async () => {
  const user = await getUserByClerkID();

  const entry = await prisma.journalEntry.create({
    data: {
      userId: user.id,
      content: "Write about your day ...",
    },
  });

  revalidatePath("/journal");

  return NextResponse.json({ data: entry });
};

Unfortunately this is having no effect on the screen, and I can only see the newly created record when I do a hard refresh of the application. Any ideas as to what might be going wrong?