小编S. *_*ong的帖子

使用 renderToString 和 renderToNodeStream 反应 SSR 两遍渲染

我试图做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-helmetreact-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

6
推荐指数
0
解决办法
1863
查看次数