Why the fetch requests in server components do not wait for layout fetches?

[aomini]

In the code example below, the order of requests sent to the server is

• /posts?id=undefined
• /my-first-post
• /posts?id=1

Where I wanted to structure the server-components in such a way that the order of requests should be

• /my-first-post
• /posts?id=1

Example where the requests aren't being sent as expected why?
layout.js

export default async function Layout({children}){
   const resp = await fetch("/my-first-post");
   const data = await resp.json();
   
   return (
     <SomeClientProvider>
         <Suspense>
          <PostComponent id={data.id} />
        </Suspense>
        {children}
     </SomeClientProvider>
   )
}

PostComponent.js

export default async function PostComponent({id}){
  const resp = await fetch(`/posts?id=${id}`)
   const data = await resp.json()
 
 return [...]
}

>  As per my understanding, after `/my-first-post` is fetched `/posts` should be fetched but it's not. Can someone explain how can I make this sequential and why this is not working?