Gatsby: How to achieve window.onload with Gatsby

[ImSolitude]

I want to add a dynamic meta tags for my website using REST API, I want to achieve something like this: window.onload,
If you notice the page is still loading until that function is done, I want that function to be the GET call for my meta tags.

Any ideas?

[vladar]

Just to clarify, why do you want to render them dynamically (in window.onload)? Do you expect to have different meta tags on different pages or do you want to have different meta tags on the same page?

Also, did you check our documentation on adding metadata to pages? If it didn't work for you, please explain in a bit more detail why?

[ImSolitude]

@vladar Yes, I want to render them dynamically since the same page may change for different content, That's the use case I have.

Let's say I have company1.website.com I have the metadata for this company on .json file hosted on S3 (www.s3.bla-bla-bla.com/company1.json) this json file changes dynamically for each company from the backend, and It's a big list of companies , Now another company company2.website.com will have different metadata so different .json file, So I control what file to get based on the subdomain, the content itself for each company is small, bunch of texts and url, but it's the metadata part that confuse me. I appreciate any help, I am stuck on this from days.

[vladar]

How do you use Gatsby in this situation? Do you have a separate site for each company or do you have a single Gatsby site?

And what metatags are you going to update (and for which purpose)? I am asking because updating some of them via javascript makes little sense (i.e. SEO-related).

It is still not entirely clear what you are trying to achieve, so please share a bit more details.

Also, you can always customize html if you have to.

[ImSolitude]

It's a single Gatsby site, I do change the SEO-related meta tags; pretty much most of them.

& That's what I am trying to achieve, how do I use Gatsby in this situation?

Right now It's just a normal axios call with the subdomain param before mounting the component on the src/pages/index.js.

What I am trying to achieve is basically a static website for each company, company1.website.com company1.website.com with their content and meta-tags coming from REST API, This data has to retrieve real-time on the client-side when the user enter the website not on build, since the # of companies is too much, I cannot do like 10k API calls on build + the data is always changing using a dashboard those companies can use to edit their website.

[ascorbic]

How about using react-helmet for the meta tags, and setting the values inside a useEffect hook? This will be run after hydration, so in your app, something like:

import React from "react"
import { Helmet } from "react-helmet"

export const App = ({ children }) => {
  const [metaTag, setMetaTag] = React.useState()

  React.useEffect(() => {
    const loadMetaTag = async () => {
      const tag = await getMetaTag()
      setMetaTag(tag)
    }
    loadMetaTag()
  }, [])

  return (
    <>
      <Helmet>
        {metaTag && <meta name="description" content={metaTag} />}
      </Helmet>
      {children}
    </>
  )
}

[ImSolitude]

@ascorbic Thank you, But will those meta tags appear when sharing the link? I guess Facebook/Twitter scraper will not notice them?

[sidharthachatterjee]

@ImSolitude Scrapers will _not_ since they typically inspect HTML and in the example @ascorbic posted, values are only set after hydration.

To get them in SSR as well, I'd recommend using something like https://www.gatsbyjs.org/packages/gatsby-source-rest-api/ to fetch that data at build time and use it in your app via helmet.

[sidharthachatterjee]

@ImSolitude Cleaning up the issue section and closing this as it seems answered for now. If I'm missing something or you would like to discuss this further, please feel free to comment and reopen.

Thank you so much and have a lovely day!