Please take a look at https://discipledchurch-prd.netlify.app/article/2022-04-10/confidence-in-finding-acceptance-a-reflection-on-psalm-19-14.
If I run gatsby build or gatsby develop locally, or if I don’t the build’s zip file and open the file, there are no problems. The verses are highlighted correctly, and there are no errors.
However, while accessing the site as it’s hosted on Netlify, I get the three errors in the console:
Starts with the error: Text content does not match server-rendered HTML.
For every verse reference it finds, I get the error: Hydration failed because the initial UI does not match what was rendered on the server.
Then, it ends with the error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
From what I can tell from the web, maybe there’s a broken tag? But the page renders fine when built locally or downloaded, and there are no errors.
Also, if you go here: https://discipledchurch-prd.netlify.app/devotional/2022-10-27/faith-over-might you’ll see that the attribute is quickly applied, then removed and a bunch of errors.
Yeah, I added a setInterval to check for page changes after the hydration (using react-hydration-provider) completes.
Notice in the code below that
I have an interval that checks to see if the div class="loading" is still present. Once it is no longer found (hydration is complete), an event is dispatched that triggers the crossref script to scan the page a second time and update it.
And, the page still populates with content for the initial delivery so that it’s “crawlable” by search engines and social media sites.
Essentially, the crossref script is running twice (once prior to hydration, and again after hydration).
Is there a better way to do this (again, I’m new to React and Gatsby)?