Asynch component being called multiple times
Unanswered
Spectacled Caiman posted this in #help-forum
Spectacled CaimanOP
so I have a layout that looks like this:
The
and this causes the
Obviously the code has been simplified alot but I'm facing issues because on a async server component i'm doing a CRUD on a db, and that is being called multiple times. Any help is much appreciated.
export default function CourseLayout({ children, params }: Params) {
const { userId } = auth();
if (!userId) return null;
const { course_id } = params;
if (/^\d+$/.test(course_id) === false) notFound();
const courseId = parseInt(course_id);
return (
<main className="flex overflow-hidden">
<SidebarProvider courseId={courseId} userId={userId} />
<section className="flex-1">
<div className="h-screen overflow-y-auto">{children}</div>
</section>
</main>
);
}
The
SidebarProvider
is an async server componentexport default async function SidebarProvider({
courseId,
userId,
}: {
courseId: number;
userId: string;
}) {
await getLessons(courseId, userId);
return (
<div>
<Link
href="/learn/courses/58/194"
className="rounded-lg border border-red-500 bg-red-500/30"
prefetch={false}
>
Go to course
</Link>
</div>
);
}
and this causes the
{children}
in the layout to get called multiple times. The children looks like:export default function Lesson({
params: { course_id, lesson_id },
}: {
params: { course_id: string; lesson_id: string };
}) {
const { userId } = auth();
if (!userId) notFound();
console.log("Calling lesson");
return (
<div className="flex h-screen flex-col text-slate-200">
test
</div>
);
}
Obviously the code has been simplified alot but I'm facing issues because on a async server component i'm doing a CRUD on a db, and that is being called multiple times. Any help is much appreciated.
3 Replies
Spectacled CaimanOP
reactStrictMode is on too btw
I feel like it may be because of the layout, when I take that out the error discontinues
nvm it's not because of layout