Contentful SSR React App Getting Error after Hydrating - reactjs

Question

I am making a SSR react contentful application and after I hydrate the app correctly I am getting an error related to the data I got correctly from the server. It thinks the key I am passing to the contentful API does not exist but it did for the server request. I can't quite figure out why it would throw this error this way. Has anyone run into this the code is here minus the keys for obvious reasons.
https://github.com/JoshBowdenConcepts/goop-troop-collective
the current error looks like this:
Uncaught TypeError: Expected parameter accessToken
K contentful.js:53
267 client.js:8
l (index):1
100 main.27827bac.chunk.js:1
l (index):1
r (index):1
t (index):1
<anonymous> main.27827bac.chunk.js:1
contentful.js:53:10
Cheers,

Answer 1

The problem is that while the server-side rendered tree passes siteInfo to <App />, the clientside bundle's index.js does not. If you were running a development build of React, you'd probably see errors related to the hydrated tree differing from the DOM. You'll need to pass the initial props to the client somehow - one popular trick is to inject them into a global variable and pass that, for example:
Server:
getSiteInformation().then((info) => {
const siteInfoInjector = `<script>window.__INITIAL_PROPS = ${JSON.stringify(
info.fields
)};</script>`;
return res.send(
data.replace(
'<div id="root"></div>',
`${siteInfoInjector}
<div id="root">
${ReactDOMServer.renderToString(
<App siteInfo={info.fields} />
)}
</div>`
)
);
});
Client's index.js:
const initialProps = window.__INITIAL_PROPS;
ReactDOM.hydrate(
<React.StrictMode>
<App siteInfo={initialProps} />
</React.StrictMode>,
document.getElementById("root")
);
A word of warning though, this injects the stringified result directly into the HTML, meaning that if your siteTitle is hello </script><script>alert(1), you've got an XSS on your hands. One way you could fix this is by base-64 encoding the initial value:
Server:
const siteInfoInjector = `<script>window.__INITIAL_PROPS = "${Buffer.from(
JSON.stringify(info.fields)
).toString("base64")}";</script>`;
Client:
const initialProps = JSON.parse(atob(window.__INITIAL_PROPS));