How do I use react syntax without using 'use-client'

[harshita0802goswami]

Summary

I'm trying to make dynamic multi-level dropdown navbar. On using react hooks it gives an error : "You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default."
I fixed this using 'use client' but on making its client component the browser will not be able to read the full source page. I need the whole source page for SEO.

How do I fix this? Any suggestion

Additional information

No response

Example

No response

[masterkain]

the way you can do that is to start thinking about server rendering by default, in your navbar the Link(s) will bear query parameters that will be used by the next http call to rebuild the state of the navbar

you an see an example here, in my case I just need the projectId, you might need something more complex

[HamAndRock]

'use client' doesn't make code client side rendered! (Suspense does that) In the pages directory everything was actually "use client", so using "use client" is like using pages directory for SSR rendering, don't worry about SEO

[harshita0802goswami]

So If I see the source page ,I couldnot see the content,so can SEO bot read it?

[HamAndRock]

Are you using useSearchParams() hook somewhere ? If you are doing that, you have to opt into dynamic rendering or wrap that component using that hook in suspsense.

But if this is the case, It should tell you during build that some pages deopted into client-side rendering, in that case that's bad for SEO and it's probably that useSearchParams() hook. Without any code provided it's really hard to help you.

I personally write all components as client in our projects because of StyledComponents and I have just page files as Server Components and SEO is fine, all HTML is returned correctly even those 95% of app is client compontents

[harshita0802goswami]

Basically , I developed a dropdown menu bar using React Hooks so How can I get the all html code into view page source in nextJs Project

[icyJoseph]

its client component the browser will not be able to read the full source page. I need the whole source page for SEO.

Client components are pre-rendered as part of the SSR pass. That is a feature of Next.js, other frameworks might act differently.

I'd say, either turn off JS, or inspect the "view-source" of your page. If the HTML is not there, it might be suspended by an upper boundary.

For what is worth, if I remember correctly, for SEO, there should not be any suspending: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example

Could you expand a bit further? Your component is not being visible in the initial HTML payload, right?