#Are Client and Server components in single file possible?

1 messages · Page 1 of 1 (latest)

molten scaffold
#

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() {
  // ...
}
crisp bisonBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

slim grove
#

No.

#

Simple as that.

molten scaffold
#

😭