I use Next.js 13.4.4 with the App Router and fetching data on the server with native fetch and Route Handlers (according to https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating and https://nextjs.org/docs/app/building-your-application/routing/route-handlers)

Everything works as expected, as long as the request is triggered from the client side.
My problem is now, that I want to fetch data also directly on the server side, according to an url-part

1. User enters URL like https://www.foo.bar/events/slug
2. Server should use slug as param for the API-Request

That also works, but the request is sent twice. I understand that this is related to rendering, but I don’t understand how to fix it. Unfortunately, most of the help online still refers to Next.js with Page Router. Does anyone have enough understanding of the issue to tell me how to adjust it?

The structure is events > [[...slug]]. The page.tsx looks like:

export default function Events({ params }: { params: { slug: string } }) {
  ...
  return (
    <div>
      <Fetch slug={params.slug} />
    </div>
  )
}

The Fetch-Component, containing my fetch-approach like like:

export default async function Fetch(slug: String) {
  const apiUrl = `${process.env.URL}/api/getEventBySlug`
  const requestBody = {
    hook: hook,
  }
  const response = await fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestBody),
  })
  const apiData = await response.json()

  return (
    <div className='page-container'>
      <FilterBar data={apiData} />
    </div>
  )
}

What did I miss?