Next.js Discord

Discord Forum

Trouble getting a server component to rerender

Answered
Large oak-apple gall posted this in #help-forum
Open in Discord
Avatar
Large oak-apple gallOP
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?
Answered by Large oak-apple gall
OK so I solved this by using the next/navigation useRouter hook and called router.refresh after I successfully created my record. Is this an OK approach? Or just a workaround?
View full answer

2 Replies

Avatar
Large oak-apple gallOP
OK so I solved this by using the next/navigation useRouter hook and called router.refresh after I successfully created my record. Is this an OK approach? Or just a workaround?
Answer
Avatar
Risky did start the fire 🙃
That is basically the only way of getting new data on the client, you can use server actions to simpleish...