irigsoft Posted December 12, 2021 Share Posted December 12, 2021 Is it possible in unigui to use (or apply) this Progressive Rendering: https://dev.to/ryansolid/server-rendering-in-javascript-optimizing-performance-1jnk 1 Quote Link to comment Share on other sites More sharing options...
irigsoft Posted December 13, 2021 Author Share Posted December 13, 2021 Is there a way to use code from example here: https://medium.com/the-thinkmill/progressive-rendering-the-key-to-faster-web-ebfbbece41a4 How to progressively render a page? Node.js has this Readable API which will let you pipe a readable stream. An example code to stream HTML might look like this router.get("/stream", async function(req, res, next) { res.status(200); res.type("text/html; charset=utf-8");// myRendered renders the HTML content const DOCTYPE = await myRendered.DOCTYPE(); const openHTML = await myRendered.openHTML(); const head = await myRendered.head(); const openBody = await myRendered.openBody();res.write(`${DOCTYPE}${openHTML}`); res.write(head); res.write(openBody);const pageChunks = [ myRendered.header, myRendered.criticalContentOpen, myRendered.nonCriticalContentOpen, myRendered.nonCriticalContentClose, myRendered.criticalContentClose, myRendered.closeBody, myRendered.closeHTML ];const pageStream = new Readable({ async read(size) { if (!pageChunks.length) { pageStream.push(null); } else { const chunkToRender = pageChunks.shift(); const renderedChunk = await chunkToRender(); pageStream.push(renderedChunk); } } });// stream content as soon as they are rendered pageStream.pipe(res); }); The example for this website built with Express and vanilla JS is here — or the methods here: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Loading Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.