How to structure layout so I keep server component functionality
Unanswered
Mrigal carp posted this in #help-forum
Mrigal carpOP
My website has a static navbar and an interactive search bar.
Currently my layout.tsx contains the navbar and is a server component, and my page.tsx has "use client"; at the top because it contains
I now want to add a path that also contains the navbar and searchbar, but I'm not sure which approach I should take:
- move the search bar from page.tsx to layout.tsx and make it a client component (including the nav bar)
- include the search bar component again in the page.tsx in the new (and all future) paths, keeping the navbar a server component
- some other approach I'm not thinking of?
Currently my layout.tsx contains the navbar and is a server component, and my page.tsx has "use client"; at the top because it contains
useState for the search value. I now want to add a path that also contains the navbar and searchbar, but I'm not sure which approach I should take:
- move the search bar from page.tsx to layout.tsx and make it a client component (including the nav bar)
- include the search bar component again in the page.tsx in the new (and all future) paths, keeping the navbar a server component
- some other approach I'm not thinking of?
2 Replies
Asian black bear
Actually you are allowed to import client components into server components, so I would make a server component for the navbar and include the search component there.
Usually I always leave page.tsx and layout.tsx as server components, as they are kind of where the data fetching functions must live in app router.