/fastify-chunk-view

A Fastify plugin for sending HTML to the client as soon as it becomes available.

Primary LanguageJavaScriptMIT LicenseMIT

Chunk View

Known Vulnerabilities Coverage

A Fastify plugin for sending HTML content to the client as soon as it becomes available.

Why

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.

Install

npm i fastify-chunk-view --save

Usage

fastify-chunk-view supports ESM and CommonJS

ESM

import fastifyChunkView from 'fastify-chunk-view';

Common JS

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 function that returns a string
  • An async function that returns a string
  • A Readable stream

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>`;
}

Further Reading