Next.js Discord

Discord Forum

Does "use client" on a page.tsx makes that page "invisible" to google?

Answered
Narcissus Flycatcher posted this in #help-forum
Open in Discord
Avatar
Narcissus FlycatcherOP
I have a page on that I want to use SSG, because of SEO.
And also I want to use React Context on some of it's components.

Say, there is landing page I want to be statically generated, and the "Login/logout" button which's title is dependent o whether the user is logged in, e.g. on the Context

If I set "use-client" on the whole page, that would literally made the whole page completely invisible for search engines?
What should I do in this case?
Answered by Dayo
If I set "use-client" on the whole page, that would literally made the whole page completely invisible for search engines?

not true. when you add "use client" to a page it becomes a Client component but it's still rendered on the server as usual (SSR). Dan Abramov, from the core React team has a simple explanation for this here - https://github.com/reactwg/server-components/discussions/4
View full answer

12 Replies

Avatar
If I set "use-client" on the whole page, that would literally made the whole page completely invisible for search engines?

not true. when you add "use client" to a page it becomes a Client component but it's still rendered on the server as usual (SSR). Dan Abramov, from the core React team has a simple explanation for this here - https://github.com/reactwg/server-components/discussions/4
Answer
Avatar
so, to answer your question. it's fine. your page will still appear on search engines
Avatar
Narcissus FlycatcherOP
Thank you!
I want to use only static generated or client-rendered pages, because the server can serve only static sites.
What do you mean it's still rendered on the server as usual (SSR). ? there should be no server rendering if I use SSG...
Avatar
could be either SSR or SSG actually depending on what you're building. both are rendered on the server.

what i've found out is if you have pages that aren't dynamic such as /blog, /about, etc, those are rendered on the server but they're generated at build time, hence SSG.

but if you have dynamic pages like blog/[blogId] then this will still be rendered on the server, however, on each request by the user, hence SSR.
so, if you want static generated pages, that's every regular Next13 page by default, irrespective of whether it's a Client component or Server component
Avatar
a good way to be sure if your page is SSR/SSG is to run next build either locally or on your host env, and then check the build output. you'll see sth like the image below. that way you can tell what pages are SSR'd and which ones are SSG'd
Image
Avatar
Narcissus FlycatcherOP
Thank you!! I dont have any apis to fetch data from to include it in the build html, so I guess I'll go with "use-client" everywhere!
Avatar
Golden-winged Warbler
The google / bing / et al crawlers are sophisticated enough that it knows how to render FE frameworks like React and Vue. This idea that you have to statically generate or SSG the html for SEO is an outdated idea
Avatar
Red-crowned Parrot
Image
Avatar
Narcissus FlycatcherOP
Keep in mind that server-side or pre-rendering is still a great idea because it makes your website faster for users and crawlers, and not all bots can run JavaScript.
https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics
Avatar
Golden-winged Warbler
because it makes your website faster

This is not an absolute truth, speed is more determined by the code written. You can find multiple help posts here asking why their next site is so slow (10s+ to load)

SSG might be faster on first load, but slower for subsequent pages. Again, there are no absolutes... for any technology