Contentful SSR React App Getting Error after Hydrating

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));