A Fastify plugin for sending HTML content to the client as soon as it becomes available.
This plugin is ideal for situations where you have static content that can be served immediatley and async content that will arrive later. For example, a product list page where the header, styles and hero image can be sent right away while you grab the products from an API.
npm i fastify-chunk-view --savefastify-chunk-view supports ESM and CommonJS
import fastifyChunkView from 'fastify-chunk-view';const fastifyChunkView = require('fastify-chunk-view');The fastify-chunk-view plugin takes an array of chunks and sends them to the client in that order. A chunk can be:
- A
string - A
functionthat returns astring - An
async functionthat returns astring - A
Readablestream
Have a look or run the examples folder in this repo for more details. Here's a silly example to illustate:
fastify.get('/', (_req, reply) => {
reply.chunkView([
'<p>test chunk 1</p>',
'<p>test chunk 2</p>'
]);
});In the example above each chunk is pushed into the reply's read stream in order.
An example of the ecommerce use case mentioned above:
fastify.get('/', (_req, reply) => {
reply.chunkView([
// Sent to client immediately
'<html><head></head><body><img src="a-big-marketing-image.jpg">',
productList, // Sent after the list is retrieved
footer,
'</body></html>'
]);
});
async function productList() {
const products = await getProducts();
return `
<ul>
${products.map(product => `<li>${product.name}</li>`).join('')}
</ul>`;
}
function getProducts() {
return new Promise(resolve => {
setTimeout(() => {
resolve([{ name: 'Product 1' }, { name: 'Product 2' }, { name: 'Product 3' }]);
}, 1000);
});
}
function footer() {
return `<footer>${new Date().toLocaleDateString()}</footer>`;
}You probably wouldn't use the same strings over and over in your routes. This plugin also lets you use Readable streams.
Building on the product list example above:
fastify.get('/', (_req, reply) => {
const startHTML = fs.createReadStream('start.html');
const endHTML = fs.createReadStream('end.html');
reply.chunkView([
startHTML,
productList,
footer,
endHTML
]);
});
async function productList() {
const products = await getProducts();
return `
<ul>
${products.map(product => `<li>${product.name}</li>`).join('')}
</ul>`;
}
function footer() {
return `<footer>${new Date().toLocaleDateString()}</footer>`;
}