Empecé a usar Suspense en mi aplicación de reacción y luego la cambié a SSR, pero mientras leía los documentos: https://reactjs.org/docs/react-dom-server.html#rendertopipeablestream
No veo por ningún lado cómo usar un HTML personalizado , antes solíamos reemplazar el div#root por el renderToString() y podías agregar el título del documento y las metaetiquetas , ahora, con esa función solo veo cómo regresar la cadena html de <App /> con la función renderToPipeableStream :
const stream = renderToPipeableStream( <StaticRouter location={req.url}> <App data={json} pathLang={checkLanguage(lang) ? lang : ''} statusCode={status} cookiesAccepted={accepted} /> </StaticRouter>, { onShellReady() { res.setHeader('Content-type', 'text/html'); stream.pipe(res); }, } ); ¿Hay alguna forma de interceptar el html construido para colocarlo en mi index.html ?
Lo acabo de resolver creando mi propio WritableStream siguiendo https://stackoverflow.com/a/70900625/6732429 de esta manera:
// HtmlWritable.js import {Writable} from 'stream'; class HtmlWritable extends Writable { chunks = []; html = ''; getHtml() { return this.html; } _write(chunk, encoding, callback) { this.chunks.push(chunk); callback(); } _final(callback) { this.html = Buffer.concat(this.chunks).toString(); callback(); } } export default HtmlWritable;e implementarlo así:
// server.jsx import HtmlWritable from './HtmlWritable'; [...] const writable = new HtmlWritable(); const stream = renderToPipeableStream( <StaticRouter location={req.url}> <App data={json} pathLang={checkLanguage(lang) ? lang : ''} statusCode={status} cookiesAccepted={accepted} /> </StaticRouter>, { onShellReady() { res.setHeader('Content-type', 'text/html'); stream.pipe(writable); }, } ); writable.on('finish', () => { const html = writable.getHtml(); data = data.replace('<div id="root"></div>', `<div id="root">${html}</div>`); resolve({data, status}); }); [...] Donde data es el retorno fs.readFile de index.html .
Esa fue mi solución, si la resolviste diferente, ¡por favor comparte!
Muchas gracias y siéntete libre de comentar, ¡me gustaría saber tu opinión !