Dynamic meta descriptions for certain pages in React SPA - reactjs

Question

I built a blog with React that fetches the data for each blog entry dynamically from an api.
The page's content obviously looks different depending on the route, e.g. mysite.com/blog/1, mysite.com/blog/2, ...
What I want to achieve is to dynamically change the meta descriptions depending on the data that is fetched from the api based on the url. In particular the og:title, og:description and og:image. Is something like that even possible?
I read about SSR/Next.JS or Gatsby but I am not sure if this is working if the data is received from api calls.
I understand that SSR would render the content on the server, hence it allows Google to crawl the pages but wouldn't that exclude api calls?
I also understand that Gatsby builds static sites but for me that wouldn't work because the api calls are dynamic and cannot be built into a static site.
I would highly appreciate some hints to point me in the right direction.

Answer 1

I understand that SSR would render the content on the server, hence it
allows Google to crawl the pages but wouldn't that exclude api calls?
I also understand that Gatsby builds static sites but for me that
wouldn't work because the api calls are dynamic and cannot be built
into a static site.
I think you've misunderstood how Gatsby works.
To summarize, Gatsby generates static pages from dynamic data (API calls) so, when you run the gatsby develop or gatsby build command, Gatsby fetches the data from the sources (in this case from your API) and generates dynamic pages (mysite.com/blog/1, mysite.com/blog/2, etc).
This data is static, meaning that each change of those sources, will force you to re-fetch the data to display the changes (in production means a new deployment) but, as soon as your pages are built statically, you can build your SEO data on the fly.
This is an old Gatsby's workflow that they used to have on their old website but I find it quite self-explanatory:
In the build-time, your site is being statically generated so, you can fully customize your SEO requirements with a custom SEO component or whatever your want. Most of the starters come with a SEO component ready to be used:
function Seo({ description, lang, meta, title }) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
}
}
}
`
)
const metaDescription = description || site.siteMetadata.description
const defaultTitle = site.siteMetadata?.title
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
meta={[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
{
name: `twitter:card`,
content: `summary`,
},
{
name: `twitter:creator`,
content: site.siteMetadata?.author || ``,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
].concat(meta)}
/>
)
}
Since the component is taking description, lang, meta and title as a props respectively, you can add it in your blog template to take dynamic data that will be built statically, meaning that, when your site will be deployed, that data will be already built, so Google crawlers will get it instantly.
const YourBlogPostTemplate = ({ data }) =>{
return <article>
<SEO title={data.allAPIData.frontmatter.title} />
<h1>I'm the title: {data.allAPIData.frontmatter.title}</h1>
</article>
}
Note: I won't fully customize it to avoid extending the answer, but get the idea.
The SEO component will be taking the title and the rest of the fields in the build-time.
Your API calls are fetched before the page is built so, at the time your page is being built your data is already static.

Answer 2

There is a pretty good article here that describes how to work around this issue the easiest way.
Basically, I needed to put a simple NodeJS server on top of my current React application. The server is now serving the files from the build directory. For some routes, I am simply replacing the __PAGE_META__ placeholder with the meta tags needed for Google, Facebook, Twitter, etc.
Here is a simple picture to describe the flow:
And a simple code snippet of the NodeJS part:
const path = require("path")
const express = require("express")
const app = express()
const fs = require("fs")
//
const pathToIndex = path.join(__dirname, "build/index.html")
app.get("/", (req, res) => {
const raw = fs.readFileSync(pathToIndex)
const pageTitle = "Homepage - Welcome to my page"
const updated = raw.replace("__PAGE_META__", `<title>${pageTitle}</title>`)
res.send(updated)
})
//
app.use(express.static(path.join(__dirname, "build")))
app.get("*", (req, res) =>
res.sendFile(path.join(__dirname, "build/index.html"))
)
const port = process.env.PORT || 5000
app.listen(port, () => {
console.log(`Server started on port ${port}`)
})
For the dynamic site, an api can be called and the page meta can be replaced with the information appropriately.