Gatsby: SEO effect of populating data with useStaticQuery

[kerematam]

Afaik, pre-rendered HTML contents where text contents already populated inside DOM have better SEO performance as Google bots do not need to mess with javascript to read data inside the page.

As I saw in the documentation of Gatsby, data can be populated via useStaticQuery where data loaded with XHR requests and injected with javascript to the page which requires another render. I wonder how efficient it is in terms of SEO performance.

Also if this query approach has a negative effect on SEO performance, is there any built-in way in Gatsby to pre-render those contents?

[jzabala]

When you use useStaticQuery Gatsby, at built-time, is going to parse and execute the queries, and inject that data. So, no XHR requests happening in the front-end. This is good for SEO since like you said, the data is going to be there in the html.

https://www.gatsbyjs.org/blog/2019-02-20-introducing-use-static-query/

[kerematam]

@jzabala Thank you for quick response. Beside this, how about internationalization, pre-render option exist for languages too?

[herecydev]

@kerematam where did you read the following?

As I saw in the documentation of Gatsby, data can be populated via useStaticQuery where data loaded with XHR requests

Internationalization doesn't exists out of the box but you can find a sample here or use a plugin like I've made: https://github.com/herecydev/gatsby-plugin-internationalization

[kerematam]

@herecydev i didn't read it somewhere. i was working on one gatsby project and as I saw some xhr request flying around. I assumed that they were data from staticQuery. (which apparently not)

Thank you for the sample.

[herecydev]

The html is rendered but will need to request those files in order to hydrate the page correctly, which you can read about here: https://www.gatsbyjs.org/docs/react-hydration/

Rest assured that Gatsby is really strong in all areas: https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fgatsby-starter-blog-demo.netlify.app%2F

[kerematam]

@herecydev thank you for the contents.

[herecydev]

No problem, I'm going to close this but feel free to create another issue if you have any further questions