Caching raw page HTML in Redis

[lsliwaradioluz]

Summary

Hi there,

I am looking for a way to hook into the rendering process in order to:

• save the generated page HTML in Redis at first load,
• get the previously generated page HTML from Redis at subsequent loads.

Digging in the code led me to the renderToHTML function which can be imported from next/dist/server/render.

Unfortunately, it's a private API (although - from what I read on the Internet - quite commonly used) and nowhere do I see a way to overwrite its original implementation. All I need is to wrap it with another function.

I've implemented something similar in Nuxt and simply wanted to replicate in Next. Is there anything I can do in that regard?

Additional information

No response

Example

No response

[SouthLink]

In versions of next.js 13.4 and below, redis caching can be implemented with the following code：

const next = require("next");
const app = next({ dev, hostname, port });
const Koa = require("koa");
const Router = require("koa-router");
const RedisClient = require("redis");
const RedisClustr = require("redis-clustr");

app
  .prepare()
  .then(() => {
    return new Promise((resolve, reject) => {
      let client;

      // init redis
      client = new RedisClustr({
        //...
      });

    });
  })
  .then((RedisClient) => {
    const server = new Koa();
    const router = new Router();

    if (RedisClient) {
      const ssrCacheInstance = new RedisCache(RedisClient);

      router.get(url, async (ctx) => {
        try {
          const had = await ssrCache.has(key);

          if (had) {
            const body = await ssrCache.get(key);
            ctx.set("X-SSR-Cache", "HIT");
            ctx.type = "text/html";
            ctx.body = body;
            return;
          }

          const html = await app.renderToHTML(req, res, ctx.url, ctx.params);

          // cache html
          // await ssrCache.set(key, html);

          ctx.status = ctx.status;
          ctx.type = "text/html";
          ctx.body = html;
        } catch (e) {
          await app.render(ctx.req, ctx.res, realUrl, ctx.params);
          console.error(e);
        }
      });

    }
    router.get(/.*/, async (ctx) => {
      await handle(ctx.req, ctx.res);
      ctx.respond = false;
    });

    server.listen(port);
  });

The above is only a brief implementation of the cache, which about redis initialization and cache clearing, setting the code part also needs to be implemented by yourself.

This section of code is problematic for versions 13.4.0 and above and does not work in the app directory.

[lsliwaradioluz]

Thank you @SouthLink. From what I can see, this is a custom Next server implementation (server.js).

Is there a way to create this custom implementation in a way that preserves the entire (or at least the majority) of the original Next server implementation and only allows me to wrap app.render / app.renderToHTML with my own higher order functions?

I am simply scared of writing my custom server implementation due to the following warning I've found in the documentation:

[SouthLink]

Here I use koa just to facilitate the processing of the routing part of my project, you can also use the original next.js server to implement some logic, through the import http library to proxy next.js to listen to the port, this is no problem at all. But as far as I know if you want to implement redis caching of html you have to do it as a custom service.

For those of you concerned, you may not be able to avoid these warnings, using a custom server comes with some side effects, the advantage is that you can control the cache and expiration time flexibly, and clear the cache.

If you are not comfortable with this approach, you can also try using the latest app directory RSC mode of next.js, you can completely ditch costom serve and redis cache, it can more finely control the caching of your page at various stages: https://nextjs.org/docs/app/building-your-application/caching

[lsliwaradioluz]

Thank you for your replies @SouthLink. I really appreciate it. All the best for you!