Does "use client" on a page.tsx makes that page "invisible" to google?
Answered
Narcissus Flycatcher posted this in #help-forum
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?
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
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
12 Replies
@Narcissus Flycatcher 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?
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
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
so, to answer your question. it's fine. your page will still appear on search engines
@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
Narcissus FlycatcherOP
I want to use only static generated or client-rendered pages, because the server can serve only static sites.
What do you mean
What do you mean
it's still rendered on the server as usual (SSR). ? there should be no server rendering if I use SSG...@Narcissus Flycatcher 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...
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
but if you have dynamic pages like
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
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
@Dayo 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
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!
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
Red-crowned Parrot
@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
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
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