so I have a layout that looks like this:

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 component

export 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.