Is it possible to use the new renderToNodeStream?
Here's an example
// Write the <head> and root <div>res.write('<html><head>' + metaTags + '</head><body><div id="root>')// Render the frontend React appconst stream = renderToNodeStream(<ReactWholeAppOrJustComponent/>)// Pipe that HTML to the responsestream.pipe(res, { end: false });// When React is finished, clean up the dangling HTML tagsstream.on('end', () => res.end('</div></body></html>'))
How about rendering your template as string and doing a split?
const html = pug.renderFile('path/to/file.pug', options);now html is for example
"<!DOCTYPE html><html><body><div id='react'>ssrContent</div></body</html>"then split, send the first part, stream, and send the rest.
html.split("ssrContent");
I had similar problems and I wrote a small function for ES6 template literals.
Example:
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)})