'use client' have an impact on SEO？

[heygsc]

Summary

If we use 'use client' in all Server Components of next.js, will SEO become so poor that it is almost the same as React?

Or will SEO not be affected?

Additional information

No response

Example

No response

[icyJoseph]

No.

'use client' components, are still SSR'd:

• Why do Client Components get SSR'd to HTML? reactwg/server-components#4

Client Components are the same components we have used up till now. The new thing are Server Components, which exclusively render on a server context.

This also means that you cannot access window, and other DOM APIs, etc. Your code still has to be able to run in both server and browser JavaScript contexts.

There are techniques to side-step SSR for Client Components though, but it is nothing you get out of the box so to speak:

• https://demystifying-rsc.vercel.app/client-components/next-dynamic/
• https://demystifying-rsc.vercel.app/client-components/no-ssr/

[icyJoseph]

I noticed that you mentioned in the end that it was under normal circumstances.
Let's add another limitation. If every 'use client' component has interactions such as useState/onClick, then in this case 'use client' means it won't be used as the initial HTML, so it will have an impact on SEO?

No. I meant that, if the JSX rendered by a Client Component has branches that activate only when the user does some interaction, or after a browser event, then obviously these JSX branches won't be in the initial HTML.

[heygsc]

I noticed that you mentioned in the end that it was under normal circumstances.
Let's add another limitation. If every 'use client' component has interactions such as useState/onClick, then in this case 'use client' means it won't be used as the initial HTML, so it will have an impact on SEO?

No. I meant that, if the JSX rendered by a Client Component has branches that activate only when the user does some interaction, or after a browser event, then obviously these JSX branches won't be in the initial HTML.

Oh, I see.

[heygsc]

I noticed that you mentioned in the end that it was under normal circumstances.
Let's add another limitation. If every 'use client' component has interactions such as useState/onClick, then in this case 'use client' means it won't be used as the initial HTML, so it will have an impact on SEO?

No. I meant that, if the JSX rendered by a Client Component has branches that activate only when the user does some interaction, or after a browser event, then obviously these JSX branches won't be in the initial HTML.

In this situation where it is not displayed at the beginning and only rendered after clicking on the interaction, the bottom div cannot be seen on the server, right? Does this also mean that the bottom div cannot be seen in SEO crawlers?

[icyJoseph]

Right, in the HTML, it won't be present. There would need to be a user action, such as the click, to trigger that.

Though, a bot, or SEO engine, might be instructed to look for a certain element, with a selector, perform an action on it, and crawl that as well. I can't make any assumptions, nor discard this possibility.

If I were writing a crawler for a given site, and I knew that the info I want, is hidden behind a click event, I'd use a web driver tool, and tell it to click a button, through a selector, and then collect the info I want.

[heygsc]

Right, in the HTML, it won't be present. There would need to be a user action, such as the click, to trigger that.

Though, a bot, or SEO engine, might be instructed to look for a certain element, with a selector, perform an action on it, and crawl that as well. I can't make any assumptions, nor discard this possibility.

If I were writing a crawler for a given site, and I knew that the info I want, is hidden behind a click event, I'd use a web driver tool, and tell it to click a button, through a selector, and then collect the info I want.

Wow, thank you. I never thought it would be like this.

[naingaungphyo]

I came across this post and I tried to play around with the links @icyJoseph gave in the marked answer comment. But there are still things that I can't confirm. I asked a question in original repo about SSG or ISR not working with export const revalidate = 90000;?

matt-kruse/demystifying-rsc#6