Question about 'use client'
Unanswered
Norwegian Forest Cat posted this in #help-forum
Norwegian Forest CatOP
I have a question:
I'm using a server component (GreenContent.tsx), which is rendered within a 'use client' component (NavigationMain.tsx).
Will Google completely ignore the content of GreenContent.tsx because it's rendered inside a 'use client' component?
Or does this setup negatively affect SEO, since the server-rendered component is nested inside a client-rendered one?
See files for the code.
I'm using a server component (GreenContent.tsx), which is rendered within a 'use client' component (NavigationMain.tsx).
Will Google completely ignore the content of GreenContent.tsx because it's rendered inside a 'use client' component?
Or does this setup negatively affect SEO, since the server-rendered component is nested inside a client-rendered one?
See files for the code.
2 Replies
American Chinchilla
Believe this is technically an invalid pattern and could lead to some issues. Server components can be passed as children/props to client components instead.
https://nextjs.org/docs/app/getting-started/server-and-client-components#interleaving-server-and-client-components
I haven't noticed SEO issues when following the pattern outlined in the docs. Client component HTML is prerendered on the server, so there is a brief period where it's not interactive, but it should show up.
https://nextjs.org/docs/app/getting-started/server-and-client-components#interleaving-server-and-client-components
I haven't noticed SEO issues when following the pattern outlined in the docs. Client component HTML is prerendered on the server, so there is a brief period where it's not interactive, but it should show up.
Exactly, components marked with “use client” and every component that’s imported into that file, are pre-rendered on the server for the first page load.
This helps SEO and provides the user with a Quick response for the first page load. Instead of a blank page, you get a fully rendered page that’s NO interactive for a short time (usually milliseconds) while it’s being hydrated on the client.
So, don’t worry about SEO unless you’re especially lazily or dynamically rendering the components with React
This helps SEO and provides the user with a Quick response for the first page load. Instead of a blank page, you get a fully rendered page that’s NO interactive for a short time (usually milliseconds) while it’s being hydrated on the client.
So, don’t worry about SEO unless you’re especially lazily or dynamically rendering the components with React
lazy or Next.js wrapper dynamic