React SSR Express Caching Middleware (Next.js)

gistfile1.js

import LRU from 'lru-cache';
import { Request, Response } from 'express';
import createEtag from 'etag';

import prettyMs from 'pretty-ms';

import { isPublicRoute } from './not-found-middleware';

import { app } from '../';

import { debuglog } from 'util';

const logger = debuglog('livescore-app-ssr-cache');

// Can be replaced with shared redix/memcache to share cache between servers
const ssrCache = new LRU({
  maxAge: 10000,
});

const toSeconds = (ms: number) => Math.floor(ms / 1000);

const createSetHeaders = (
  revalidate = (ttl: number) => Math.round(ttl * 0.2)
) => {
  return ({ res, createdAt, isHit, ttl, hasForce, etag }: any) => {
    const diff = hasForce ? 0 : createdAt + ttl - Date.now();
    const maxAge = toSeconds(diff);
    const revalidation = revalidate ? toSeconds(revalidate(ttl)) : 0;

    let cacheControl = `public, must-revalidate, max-age=${maxAge}, s-maxage=${maxAge}`;

    if (revalidation) {
      cacheControl = `${cacheControl}, stale-while-revalidate=${revalidation}, stale-if-error=${revalidation}`;
    }

    res.setHeader('Cache-Control', cacheControl);
    res.setHeader('X-Cache-Status', isHit ? 'HIT' : 'MISS');
    res.setHeader('X-Cache-Expired-At', prettyMs(diff));
    res.setHeader('ETag', etag);
  };
};

const SsrCache = async (req: Request, res: Response, next: Function) => {
  // TODO Can be replaced by a more reliable way?
  const isPublic = isPublicRoute(req.path);

  if (!isPublic) {
    const cacheKey = req.path;
    const cacheResult = ssrCache.has(cacheKey) && ssrCache.get(cacheKey);

    if (cacheResult) {
      const {
        etag: cachedEtag,
        createdAt,
        data,
        ttl = ssrCache.maxAge,
      } = cacheResult as any;

      const ifNoneMatch = req.headers['if-none-match'];
      const isModified = cachedEtag !== ifNoneMatch;

      logger(
        `SSR Response from cache key: ${cacheKey}, etag: ${cachedEtag}, noneMatch: ${ifNoneMatch}`
      );

      const setHeaders = createSetHeaders();

      setHeaders({
        etag: cachedEtag,
        res,
        createdAt,
        isHit: true,
        ttl,
      } as any);

      // Save bandwidth/cpu cycles use etag comparison
      if (!isModified) {
        res.statusCode = 304;
        return res.end();
      }

      return res.end(data);
    } else {
      const _resEnd = res.end.bind(res);

      res.end = function (payload: any) {
        if (res.statusCode === 200) {
          const cacheResponse = {
            etag: createEtag(payload),
            ttl: ssrCache.maxAge,
            data: payload,
            createdAt: Date.now(),
          } as any;

          ssrCache.set(cacheKey, cacheResponse);

          createSetHeaders()({
            ...cacheResponse,
            isHit: false,
            res,
          });
        }
        return _resEnd(payload);
      };

      logger('SSR rendering without cache and try caching for ', cacheKey);
      return await app.renderToHTML(req, res, req.path);
    }
  }

  next();
};

export default SsrCache;