Gatsby: SSR React helmet plugin not working in combination with Redux

[Jornve]

Description

I have a multi language website build with Gatsby, redux, redux-persist and Storyblok (CMS). When sharing our website in Slack I've noticed that no preview is available. I did some research and it looks that all the meta tags set via Helmet are present but they are not server rendered. You see the tags appearing when you inspect the website via the browser. As a result, when sharing the website, no preview text or picture is available (og meta tags, title & description) and I guess this also has a negative impact on general SEO as well.

The official Gatsby website is working fine though. After investigating the Gatsby repo I saw they are not using redux and custom html.js file. I'm wondering if the combination of redux and a custom html.js file can break the gatsby-plugin-react-helmet plugin?

I saw a lot of other people struggling with Helmet-related issues. Since SEO is an absolute key-stone of every website these days I think we have to improve both the plugin as well as documentation on how this plugin works and the current limitations. We've spent a lot of time creating this website and it's basically useless because of this problem, which is very hard to debug and information of how this plugin works in combination with Gatsby just doesn't exist.

Steps to reproduce

1. Create a new Gatsby (v2) and integrate redux and redux-persist
2. Create a custom html.js file (Already tried without this file, problem remains)
3. Install gatsby-plugin-react-helmet plugin

Expected result

Tags are set during build time via React Helmet.

Actual result

Tags are inserted when the website is rendering in the browser. When inspecting the code in a browser you can see them appear.

Environment

System:
OS: macOS 10.14.3
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 71.0.3578.98
Firefox: 65.0
Safari: 12.0.3
npmPackages:
gatsby: ^2.0.91 => 2.0.91
gatsby-image: ^2.0.26 => 2.0.26
gatsby-plugin-eslint: ^2.0.3 => 2.0.3
gatsby-plugin-offline: ^2.0.21 => 2.0.21
gatsby-plugin-react-helmet: ^3.0.5 => 3.0.5
gatsby-plugin-react-svg: ^2.0.0 => 2.0.0
gatsby-plugin-sharp: ^2.0.17 => 2.0.17
gatsby-plugin-sitemap: ^2.0.4 => 2.0.4
gatsby-plugin-styled-components: ^3.0.4 => 3.0.4
gatsby-plugin-webpack-size: ^0.0.3 => 0.0.3
gatsby-source-filesystem: ^2.0.16 => 2.0.16
gatsby-source-storyblok: ^0.1.2 => 0.1.3
gatsby-transformer-json: ^2.1.7 => 2.1.7
gatsby-transformer-remark: ^2.2.0 => 2.2.0
gatsby-transformer-sharp: ^2.1.10 => 2.1.10

[pieh]

I've tried to reproduce using our using-redux example as a base - https://github.com/pieh/redux-helmet

And react-helmet definitely can consume data from redux store for static html render.

https://github.com/pieh/redux-helmet/blob/9daad93c750bdd7dae0b6c4f9473e4cd1d01f559/src/components/layout.js#L32-L40

So I would assume there is something in your setup that cause SEO meta tags to not render into static html. But it's really hard to pinpoint what exactly without access to your project.

[Jornve]

@pieh Thanks for your response. I've added you to the project on Gitlab so you can have a look. Meanwhile I've tried many things including removing html.js file, added the code of the plugin directly into gatsby-ssr.js but nothings works.

FYI: The tags are being set via Helmet only but on rendering (I guess) and not via SSR.

Update
I'm using Netlify as host and saw some people that have the same issue when hosting on Netlify. I'm uploading the project to an S3 bucket as we speak to make sure the hosting is not causing this.

I hope you can find some time to take a look and investigate this.

[pieh]

Got invite, but I don't seem to have access to actual code (have access to wiki / issues / members etc)

[Jornve]

@pieh Now you should have access, my bad!

Thank for taking time for me :)

[pieh]

Ok, now I see it ;)

[Jornve]

Hi @pieh, did you found some time to take a look at our code? I have no clue what could be wrong and am hoping you could point us in the right direction to solve this issue :)