Nextjs static & dynamic rendering

Question

In my app I have a dashboard.

export default async function Home() {

  return (
    <MainContainer>
      <main className="overflow-auto flex flex-col min-h-[calc(100vh-120px)]">
        <Toolbar />
          <div className={`min-h-[68vh]`}>
            <CardsFetcher />
          </div>
      </main>
    </MainContainer>
  )
}

The component CardsFetcher gets data from the db and show it on my dashboard.

export default async function CardsFetcher() {
  const res = await fetch('http://localhost:3000/api/projekts',{
    cache: "no-store"
  })
  const data = await res.json()
  if (!data) {
    return <Loading />
  } else if ( data.length === 0) {
    return <div className={`text-3xl tracking-widest text-gray-500 text-center mt-[10%]`}>
      LEER
    </div>
  } else {
    return (
      <section className={`flex flex-wrap gap-12 mx-auto h-full w-full`}>
        {data.map((el, ind) => (
          <ProjectCard
            key={el._id}
            unternehmen={el.unternehmen}
            mitarbeiter={el.mitarbeiter}
            id={el._id}
            name={el.name}
            createdAt={el.createdAt}
            status={el.status}
          />
        ))}
      </section>
    );
  }
}

it's also a server component. In dev mode everything works fine but at the build time, there are rendering issues. Something with static props.

First of all I tried to add a function getStaticProps, but it didn't solve the problem. In the command line the error indicates to be on the main "/" page. But there is nothing there that should be dynamic.

The solution that helped me it to add to the "/" page: export const dynamic = "force-dynamic"

Now my build works, but it appears that my main "/" page is dynamic as it should be because it this "force-dynamic". But why did I have to do it at all? May be someone could help me to figure that out and how can I leave my "/" page static and that only the CardsFetcher be dynamic. What did I do wrong and what could improve my code?

Additional info: page"/" -> CardsFetcher(get data from mongodb). there is also "/projects/[id]/page.js" where I render my cards. By addidng a new card, the dashboard's component CardsFetcher revalidates the data and shows it again. I don't use cache, cache: "no-store".