Store Nextjs cache on Redis

Author: marcoacierno

frontend/cache-handler.mjs

@@ -0,0 +1,77 @@
+import { CacheHandler } from "@neshca/cache-handler";
+import createLruHandler from "@neshca/cache-handler/local-lru";
+import createRedisHandler from "@neshca/cache-handler/redis-stack";
+import { createClient } from "redis";
+
+CacheHandler.onCreation(async () => {
+  let client;
+
+  try {
+    // Create a Redis client.
+    client = createClient({
+      url: process.env.REDIS_URL ?? "redis://localhost:6379",
+    });
+
+    // Redis won't work without error handling. https://github.com/redis/node-redis?tab=readme-ov-file#events
+    client.on("error", (error) => {
+      if (typeof process.env.NEXT_PRIVATE_DEBUG_CACHE !== "undefined") {
+        // Use logging with caution in production. Redis will flood your logs. Hide it behind a flag.
+        console.error("Redis client error:", error);
+      }
+    });
+  } catch (error) {
+    console.warn("Failed to create Redis client:", error);
+  }
+
+  if (client) {
+    try {
+      console.info("Connecting Redis client...");
+
+      // Wait for the client to connect.
+      // Caveat: This will block the server from starting until the client is connected.
+      // And there is no timeout. Make your own timeout if needed.
+      await client.connect();
+      console.info("Redis client connected.");
+    } catch (error) {
+      console.warn("Failed to connect Redis client:", error);
+
+      console.warn("Disconnecting the Redis client...");
+      // Try to disconnect the client to stop it from reconnecting.
+      client
+        .disconnect()
+        .then(() => {
+          console.info("Redis client disconnected.");
+        })
+        .catch(() => {
+          console.warn(
+            "Failed to quit the Redis client after failing to connect.",
+          );
+        });
+    }
+  }
+
+  /** @type {import("@neshca/cache-handler").Handler | null} */
+  let handler;
+
+  if (client?.isReady) {
+    // Create the `redis-stack` Handler if the client is available and connected.
+    handler = await createRedisHandler({
+      client,
+      keyPrefix: "nextjs:",
+      timeoutMs: 1000,
+    });
+  } else {
+    // Fallback to LRU handler if Redis client is not available.
+    // The application will still work, but the cache will be in memory only and not shared.
+    handler = createLruHandler();
+    console.warn(
+      "Falling back to LRU handler because Redis client is not available.",
+    );
+  }
+
+  return {
+    handlers: [handler],
+  };
+});
+
+export default CacheHandler;

frontend/next.config.js

@@ -22,6 +22,8 @@ module.exports = withSentryConfig({
     localeDetection: false,
   },
   trailingSlash: false,
+  cacheHandler: require.resolve("./cache-handler.js"),
+  cacheMaxMemorySize: 0, // disable default in-memory caching
   async headers() {
     return [
       {

frontend/package.json

@@ -23,6 +23,7 @@
 		"@graphql-codegen/typescript": "^2.7.2",
 		"@graphql-codegen/typescript-operations": "^2.5.2",
 		"@graphql-codegen/typescript-react-apollo": "^4.3.2",
+		"@neshca/cache-handler": "^1.9.0",
 		"@python-italia/pycon-styleguide": "0.1.197",
 		"@sentry/nextjs": "^8.24.0",
 		"@vercel/analytics": "^1.1.1",
@@ -56,6 +57,7 @@
 		"react-use-form-state": "^0.13.2",
 		"react-use-sync-scroll": "^0.1.0",
 		"react-wrap-balancer": "^1.1.1",
+		"redis": "^4.7.0",
 		"styled-system": "^5.1.5",
 		"svg-to-pdfkit": "^0.1.8",
 		"xstate": "^4.38.3",