Is it possible to have both server and client rendered components in same file? The reason I want this is to keep files more organized and easier to edit.

I used to keep similar components in a shared folder, for example: Header, HeaderNavigation, HeaderNavigationMobile, HeaderNavigationDesktop, HeaderCta would go into ~/components/header/*, but since they are not particularly large I think it would be better to keep them in a single file (e.g. ~/components/header/header.tsx), for the ease of editing, and simpler project structure.

The problem is not all components are client or server and components such as HeaderNavigationDesktop would be a server component since it's just link buttons, while HeaderNavigationMobile would be a Sheet menu which will be rendered on client.

export function Header() {
  return (
    <HeaderProvider>
      <header>
        { /* server */ }
        <HeaderLogo />

        { /* client uses js to display either mobile or desktop */ }
        <HeaderNavigation />

        { /* server */ }
        <HeaderCta />
      </header>
    </HeaderProvider>
  )
}

function HeaderLogo() {
  // ...
}

function HeaderNavigation() {
  "use client"

  // ...
}

function HeaderCta() {
  // ...
}