Contentful React App在水化后出现错误

Question

我正在制作一个SSR react contentful应用程序，在我正确地对应用程序进行消重之后，我得到了一个与我从服务器上正确获得的数据相关的错误。它认为我传递给contentful API的密钥不存在，但对于服务器请求确实存在。我不太明白为什么它会以这种方式抛出这个错误。如果有人遇到这种情况，这里的代码没有关键字，原因很明显。

https://github.com/JoshBowdenConcepts/goop-troop-collective

当前错误如下所示：

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

干杯,

Answer 1

问题是，虽然服务器端呈现的树将siteInfo传递给<App />，但客户端捆绑包的index.js不会。如果您正在运行React的开发构建，您可能会看到与DOM不同的水合化树相关的错误。您需要以某种方式将初始属性传递给客户端-一个流行的技巧是将它们注入全局变量并传递，例如：

服务器：

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

客户端的index.js

const initialProps = window.__INITIAL_PROPS;

ReactDOM.hydrate(
  <React.StrictMode>
    <App siteInfo={initialProps} />
  </React.StrictMode>,
  document.getElementById("root")
);

但是需要注意的是，这会将字符串化的结果直接注入到HTML中，这意味着如果您的siteTitle是hello </script><script>alert(1)，那么您手上就有一个XSS。解决这个问题的一种方法是对初始值进行base-64编码：

服务器：

const siteInfoInjector = `<script>window.__INITIAL_PROPS = "${Buffer.from(
  JSON.stringify(info.fields)
).toString("base64")}";</script>`;

客户端：

const initialProps = JSON.parse(atob(window.__INITIAL_PROPS));