Question

我在项目中使用服务器端渲染，我刚刚将我的堆栈更新为React 16。

我目前的筹码是：节点8.4 表达反应16 终极版的WebPack Pug用于静态内容（如页眉和页脚）

我想知道是否可以使用我的堆栈在我的应用程序中使用新的renderToNodeStream。

打印路线，我使用：

const matchedRoute = matchRoutes(routes, req.url);
let context = {};

if (matchedRoute) {
    const initialState = JSON.stringify(store.getState()).replace(/</g, '\\u003c');
    const criticalCSSPath = manifest['criticalCss.css'].replace('http://s.domain.com.br/', '/');
    const criticalCss = fs.readFileSync(`./public${criticalCSSPath}`, 'utf-8');

    if (context.url) {
        return res.redirect(302, context.url);
    }else {
        const content = renderToString(
            <Provider store={store}>
                <StaticRouter location={req.url} context={context}>
                    {renderRoutes(routes)}
                </StaticRouter>
            </Provider>
        );

        return res.render(view, {initialState: initialState, content, view, criticalCss});
    }
}

但是如果我想渲染到nodestream，我需要做这样的事情，根据文档：

app.get("/", (req, res) => {
   res.write("<!DOCTYPE html><html><head><title>My Page</title></head><body>");
   res.write("<div id='content'>"); 
   const stream = renderToNodeStream(<MyPage/>);
   stream.pipe(res, { end: false });
   stream.on('end', () => {
      res.write("</div></body></html>");
      res.end();
   });
});

有没有人知道使用哈巴狗实现这一目标的方法，比如我当前的堆栈？

Answer 1

如何渲染template as string并进行拆分？

const html = pug.renderFile('path/to/file.pug', options);

现在html就是

"<!DOCTYPE html><html><body><div id='react'>ssrContent</div></body</html>"

然后拆分，发送第一部分，流，然后发送其余部分。

html.split("ssrContent");

Answer 2

我有类似的问题，我为ES6模板文字编写了一个小函数。

示例：

const streamString = require('node-stream-string')

// ...

app.get("/", (req, res) => {
    const stream = streamString`
        <!DOCTYPE html>
        <html>
        <head>
            <title>${ getTitle(req) }</title>
            <style>${ getStyle(req) }</style>
        </head>
        <body>    
            <div id='root'>
                ${ renderToNodeStream(<App/>) }
            </div>
        </body>
        </html>
    `
    stream.pipe(res)
})

GIT中： https://github.com/xelaok/node-stream-string

Answer 3

这是一个例子

// Write the <head> and root <div>
res.write('<html><head>' + metaTags + '</head><body><div id="root>')
// Render the frontend React app
const stream = renderToNodeStream(<ReactWholeAppOrJustComponent/>)
// Pipe that HTML to the response
stream.pipe(res, { end: false });
// When React is finished, clean up the dangling HTML tags
stream.on('end', () => res.end('</div></body></html>'))

是否可以使用新的renderToNodeStream？

3 个答案: