0

我在服务器端渲染 React 16 应用程序，使用renderToString()如下：

const markup = await frontloadServerRender(() =>
  // to support AMP, use renderToStaticMarkup()
  renderToString(
    <Capture report={m => modules.push(m)}>
      <Provider store={store}>
        <StaticRouter location={req.url} context={context}>
          <Frontload isServer={true}>
            <App />
          </Frontload>
        </StaticRouter>
      </Provider>
    </Capture>
  )
);

之后，我得到title,meta等，Helmet然后调用下面的代码来完成我的标记。

const injectHTML = (
  data,
  { html, title, meta, link, headScript, body, scripts, state }
) => {
  data = data.replace('<html>', `<html ${html}>`);
  data = data.replace(/<title>.*?<\/title>/g, title);
  data = data.replace('</head>', `${meta}${link}${headScript}</head>`);
  data = data.replace(
    '<div id="root"></div>',
    `<div id="root">${body}</div><script>window.__PRELOADED_STATE__ = ${state}</script>${scripts.join(
      ''
    )}`
  );    
  return data;
};

我想替换renderToString为renderToStream. 但是，我不明白在这种情况下，我如何将 . 返回的数据注入标记react-helmet，就像我现在使用injectHTML().

找到了几个async应该react-helmet与renderToNodeStream-react-helmet-async和react-safety-helmet. 我不知道如何使任何一个工作，所以它实际上会产生预期的结果。此处的帖子演示了一种可能的解决方案react-safety-helmet。但是，这甚至不如renderToStream()。虽然流程中使用了流，但代码在流关闭之前不会向客户端发送数据。因此，没有任何形式的性能改进。

建议？

4

0 回答 0