Store Next.js ISG cache on Redis (#4228)

Author: marcoacierno

.github/workflows/deploy.yml

@@ -324,6 +324,7 @@ jobs:
             CMS_ADMIN_HOST=${{ fromJSON('["pastaporto-", ""]')[github.ref == 'refs/heads/main'] }}admin.pycon.it
             CMS_HOSTNAME=${{ steps.vars.outputs.cms_hostname }}
             CONFERENCE_CODE=${{ steps.vars.outputs.conference_code }}
+            GIT_HASH=${{ steps.git.outputs.githash }}
 
   deploy-fe:
     runs-on: ubuntu-latest

frontend/Dockerfile

@@ -16,6 +16,7 @@ ARG API_URL_SERVER
 ARG CMS_HOSTNAME
 ARG CONFERENCE_CODE
 ARG CMS_ADMIN_HOST
+ARG GIT_HASH
 
 WORKDIR /app
 

frontend/cache-handler.mjs

@@ -0,0 +1,80 @@
+import { CacheHandler } from "@neshca/cache-handler";
+import createLruHandler from "@neshca/cache-handler/local-lru";
+import createRedisHandler from "@neshca/cache-handler/redis-strings";
+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: `${process.env.GIT_HASH}:`,
+      timeoutMs: 1000,
+      keyExpirationStrategy: "EXAT",
+      sharedTagsKey: "__sharedTags__",
+      revalidateTagQuerySize: 100,
+    });
+  } 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,17 @@ module.exports = withSentryConfig({
     localeDetection: false,
   },
   trailingSlash: false,
+  cacheHandler:
+    process.env.VERCEL_ENV === "preview"
+      ? undefined
+      : require.resolve("./cache-handler.mjs"),
+  generateBuildId:
+    process.env.VERCEL_ENV === "preview"
+      ? undefined
+      : async () => {
+          return process.env.GIT_HASH;
+        },
+  cacheMaxMemorySize: 0,
   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",

frontend/pnpm-lock.yaml

@@ -39,6 +39,14 @@ resource "aws_ecs_task_definition" "pycon_frontend" {
         {
           name = "API_URL_SERVER",
           value = "http://${var.server_ip}"
+        },
+        {
+          name = "REDIS_URL",
+          value = "redis://${var.server_ip}/3"
+        },
+        {
+          name = "GIT_HASH",
+          value = data.external.githash.result.githash
         }
       ]