Skip to main content

Cache Hooks

Cache Hooks​

There are cases where you want to modify the html that is served from cache or the html that is generated on the fly.

For example, you might want to add some tracking scripts to the html that is served from cache. Or you might want to add some custom html to the html that is generated on the fly.

To do that, you can use the modifyCachedHtml and modifyGeneratedHtml callbacks.

modifyCachedHtml​

The modifyCachedHtml callback is called when the html is served from cache (on every user request). It receives the request and the cached html as parameters. It should return the modified html.

modifyGeneratedHtml​

The modifyGeneratedHtml callback is called when the html is generated on the fly (before the cache is stored). It receives the request and the generated html as parameters. It should return the modified html.

Example​

server.get(
  '*',
  // Serve page if it exists in cache
  async (req, res, next) =>
    await isr.serveFromCache(req, res, next, {
      modifyCachedHtml: (req, cachedHtml) => {
        return `${cachedHtml}<!-- Hello, I'm a modification to the original cache! -->`;
      },
    }),

  const isr = new ISRHandler({
    indexHtml,
    invalidateSecretToken: 'MY_TOKEN', // replace with env secret key ex. process.env.REVALIDATE_SECRET_TOKEN
    enableLogging: true,
    serverDistFolder,
    browserDistFolder,
    bootstrap,
    commonEngine,
    modifyGeneratedHtml: (req, html) => {
      return `${html}<!-- Hello, I'm modifying the generatedHtml before caching it! -->`;
    },
    // cache: fsCacheHandler,
  });

// Server side render the page and add to cache if needed
  async (req, res, next) => await isr.render(req, res, next),
);
Important:

Use these methods with caution as the logic written can increase the processing time.