我试图做SSR与ReactDOMServer.renderToNodeStream(element)只是想知道是否有将与同时使用的任何问题ReactDOMServer.renderToString(element),并 ReactDOMServer.renderToNodeStream(element)在每个请求?
我在自定义 SSR 设置中拥有的是:* React 16 * react-loadable * styled-components v4 * react-helmet-async * Redux * Express JS
以前使用 React,我可以通过首先渲染<head></head>包含由React生成的标记的标签,react-helmet然后使用它ReactDOMServer.renderToString()来渲染我的 React 元素来轻松渲染 HTML 文档。
但是,通过切换到ReactDOMServer.renderToNodeStream()我不得不切换react-helmet为react-helmet-async,它支持renderToNodeStream()功能。但是当我尝试<head></head>用标记渲染标签时,react-helmet-async它会返回为undefined.
为了解决这个问题,我不得不先使用,renderToString()而没有将它实际写到 Express JS 中response。这样react-helmet-async就可以看到要呈现哪些元标记,然后继续使用renderToNodeStream并将其流式传输到response.
我已经尽可能地简化了我的代码,因为我想了解这是否会产生负面影响(对于性能,或者是否有人能想到其他任何事情)?
前:
let html = ReactDOMServer.renderToString(stylesheet.collectStyles(
<Loadable.Capture report={moduleName => modules.push(moduleName)}>
<LocalStoreProvider store={store}>
<HelmetProvider context={helmetContext}>
<RouterContext …Run Code Online (Sandbox Code Playgroud) javascript reactjs server-side-rendering styled-components react-helmet