Does adding a use client directive to the header component makes it not a crawlable component?
Unanswered
Sirex woodwasp posted this in #help-forum
Sirex woodwaspOP
Does adding a use client directive to the header component makes it not a crawlable component? If yes, how i can avoid using this directive while i am using useState for hamburger menu toggle?
17 Replies
Alfonsus Ardani
Depends. Client components are still prerendered in the server
make sure your data is ready to be rendered in the client component on the initial state and displayed in the return function
If you're making a hamburger menu toggle, make sure that the list of navigations are server component and nesting it inside a client component wont make it a client-component but still is client-side rendered
See the Next.js documentation to compose and mix server components and client components to maximise crawlability for your use case
Sirex woodwaspOP
Forgive me, i am still trying to understand the different rendering approaches but can you tell me if this approach : https://github.com/formbricks/formbricks/blob/main/apps/web/app/(app)/environments/%5BenvironmentId%5D/components/Navigation.tsx
is seo-friendly?
is seo-friendly?
Alfonsus Ardani
You can check it yourself by looking at the networks tab
And searching for any particular string of text in the first request response
Sirex woodwaspOP
When you specify a component with the use client directive in Next.js 13, you are designating that component to be a Client Component. This means that the component will not be rendered on the server during server-side rendering (SSR) or static generation. Instead, its rendering and interactivity are fully handled on the client side—in the user's browser.
Alfonsus Ardani
Not completely true
A client component is still prerendered by Next.js and therefore will be rendered in the server during SSR.
Furthermore, the use of composition pattern allows you to nest server component in the chuld of client component, allowing you to have extended ways to utilize SSR with client components
Sirex woodwaspOP
do you have any reference that could help me understand this in more details, the documentation of this part is not quite clear for me? also, do you a way to make sure that any component is indexed correctly by the seo?
Alfonsus Ardani
Not any component
Like i said, they are SSRd if given the opportunity that they are able to be SSRd
Like you cant SSR useEffect but you can SSR initial states of Cluent component
Its in the documentation
Look for Client component