perf: og image caching v2

apps/web/app/(use-page-wrapper)/apps/[slug]/page.tsx

@@ -17,21 +17,21 @@ export const generateMetadata = async ({ params }: _PageProps) => {
   if (!p.success) {
     return notFound();
   }
-
-  const props = await getStaticProps(p.data.slug);
+  const slugFromUrl = p.data.slug;
+  const props = await getStaticProps(slugFromUrl);
 
   if (!props) {
     notFound();
   }
-  const { name, logo, description } = props.data;
+  const { name, logo, dirName: appStoreDirSlug, slug: appSlug, description } = props.data;
 
   return await generateAppMetadata(
-    { slug: logo, name, description },
+    { slug: appStoreDirSlug ?? appSlug, logoUrl: logo, name, description },
     () => name,
     () => description,
     undefined,
     undefined,
-    `/apps/${p.data.slug}`
+    `/apps/${appSlug}`
   );
 };
 

apps/web/app/_utils.tsx

@@ -66,10 +66,10 @@ export const _generateMetadata = async (
   );
   const image =
     SEO_IMG_OGIMG +
-    constructGenericImage({
+    (await constructGenericImage({
       title: metadata.title,
       description: metadata.description,
-    });
+    }));
 
   return {
     ...metadata,
@@ -80,7 +80,7 @@ export const _generateMetadata = async (
   };
 };
 
-export const _generateMetadataForStaticPage = (
+export const _generateMetadataForStaticPage = async (
   title: string,
   description: string,
   hideBranding?: boolean,
@@ -108,10 +108,10 @@ export const _generateMetadataForStaticPage = (
   };
   const image =
     SEO_IMG_OGIMG +
-    constructGenericImage({
+    (await constructGenericImage({
       title: metadata.title,
       description: metadata.description,
-    });
+    }));
 
   return {
     ...metadata,
@@ -137,7 +137,7 @@ export const generateMeetingMetadata = async (
     origin,
     pathname
   );
-  const image = SEO_IMG_OGIMG + constructMeetingImage(meeting);
+  const image = SEO_IMG_OGIMG + (await constructMeetingImage(meeting));
 
   return {
     ...metadata,
@@ -164,7 +164,7 @@ export const generateAppMetadata = async (
     pathname
   );
 
-  const image = SEO_IMG_OGIMG + constructAppImage({ ...app, description: metadata.description });
+  const image = SEO_IMG_OGIMG + (await constructAppImage({ ...app, description: metadata.description }));
 
   return {
     ...metadata,

apps/web/app/api/social/og/image/__tests__/route.test.ts

@@ -1,6 +1,8 @@
 import { NextRequest } from "next/server";
 import { describe, expect, test, vi, beforeEach } from "vitest";
 
+import { getOGImageVersion } from "@calcom/lib/OgImages";
+
 import { GET } from "../route";
 
 vi.mock("next/og", () => ({
@@ -14,14 +16,19 @@ vi.mock("next/og", () => ({
   })),
 }));
 
-vi.mock("@calcom/lib/OgImages", () => ({
-  Meeting: vi.fn(() => null),
-  App: vi.fn(() => null),
-  Generic: vi.fn(() => null),
-}));
+vi.mock("@calcom/lib/OgImages", async (importOriginal) => {
+  return await importOriginal();
+});
+
+vi.mock(import("@calcom/lib/constants"), async (importOriginal) => {
+  return await importOriginal();
+});
 
-vi.mock("@calcom/lib/constants", () => ({
-  WEBAPP_URL: "http://localhost:3000",
+vi.mock("@calcom/web/public/app-store/svg-hashes.json", () => ({
+  default: {
+    huddle01video: "81a0653b",
+    zoomvideo: "d1c78abf",
+  },
 }));
 
 global.fetch = vi.fn();
@@ -82,15 +89,15 @@ describe("GET /api/social/og/image", () => {
       const response = await GET(request);
 
       expect(response.status).toBe(404);
-      expect(await response.text()).toBe("What you're looking for is not here..");
+      expect(await response.text()).toBe("Wrong image type");
     });
 
     test("returns 404 when invalid type parameter is provided", async () => {
       const request = createNextRequest("http://example.com/api/social/og/image?type=invalid");
       const response = await GET(request);
 
       expect(response.status).toBe(404);
-      expect(await response.text()).toBe("What you're looking for is not here..");
+      expect(await response.text()).toBe("Wrong image type");
     });
   });
 
@@ -107,4 +114,33 @@ describe("GET /api/social/og/image", () => {
       expect(await response.text()).toBe("Internal server error");
     });
   });
+
+  describe("getOGImageVersion with SVG hash", () => {
+    test("app type: ETag changes when SVG hash is provided", async () => {
+      const etagWithoutHash = await getOGImageVersion("app");
+      const etagWithHash = await getOGImageVersion("app", {
+        slug: "huddle01video",
+        svgHash: "81a0653b",
+      });
+
+      expect(etagWithoutHash).toBeTruthy();
+      expect(etagWithHash).toBeTruthy();
+      expect(etagWithHash).not.toBe(etagWithoutHash);
+    });
+
+    test("app type: different SVG hashes produce different ETags", async () => {
+      const etagHash1 = await getOGImageVersion("app", {
+        slug: "huddle01video",
+        svgHash: "81a0653b",
+      });
+      const etagHash2 = await getOGImageVersion("app", {
+        slug: "zoomvideo",
+        svgHash: "d1c78abf",
+      });
+
+      expect(etagHash1).toBeTruthy();
+      expect(etagHash2).toBeTruthy();
+      expect(etagHash1).not.toBe(etagHash2);
+    });
+  });
 });

apps/web/app/api/social/og/image/route.tsx

@@ -3,7 +3,7 @@ import type { NextRequest } from "next/server";
 import type { SatoriOptions } from "satori";
 import { z, ZodError } from "zod";
 
-import { Meeting, App, Generic } from "@calcom/lib/OgImages";
+import { Meeting, App, Generic, getOGImageVersion } from "@calcom/lib/OgImages";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 
 export const runtime = "edge";
@@ -22,6 +22,7 @@ const appSchema = z.object({
   name: z.string(),
   description: z.string(),
   slug: z.string(),
+  logoUrl: z.string(),
 });
 
 const genericSchema = z.object({
@@ -74,6 +75,7 @@ async function handler(req: NextRequest) {
             imageType,
           });
 
+          const etag = await getOGImageVersion("meeting");
           const img = new ImageResponse(
             (
               <Meeting
@@ -89,7 +91,9 @@ async function handler(req: NextRequest) {
             status: 200,
             headers: {
               "Content-Type": "image/png",
-              "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400",
+              "Cache-Control":
+                "public, max-age=31536000, immutable, s-maxage=31536000, stale-while-revalidate=31536000",
+              ETag: `"${etag}"`,
             },
           });
         } catch (error) {
@@ -111,19 +115,32 @@ async function handler(req: NextRequest) {
       }
       case "app": {
         try {
-          const { name, description, slug } = appSchema.parse({
+          const { name, description, slug, logoUrl } = appSchema.parse({
             name: searchParams.get("name"),
             description: searchParams.get("description"),
             slug: searchParams.get("slug"),
+            logoUrl: searchParams.get("logoUrl"),
             imageType,
           });
-          const img = new ImageResponse(<App name={name} description={description} slug={slug} />, ogConfig);
+
+          // Get SVG hash for the app
+          const svgHashesModule = await import("@calcom/web/public/app-store/svg-hashes.json");
+          const SVG_HASHES = svgHashesModule.default ?? {};
+          const svgHash = SVG_HASHES[slug] ?? undefined;
+
+          const etag = await getOGImageVersion("app", { svgHash });
+          const img = new ImageResponse(
+            <App name={name} description={description} slug={slug} logoUrl={logoUrl} />,
+            ogConfig
+          );
 
           return new Response(img.body, {
             status: 200,
             headers: {
               "Content-Type": "image/png",
-              "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400",
+              "Cache-Control":
+                "public, max-age=31536000, immutable, s-maxage=31536000, stale-while-revalidate=31536000",
+              ETag: `"${etag}"`,
             },
           });
         } catch (error) {
@@ -151,13 +168,16 @@ async function handler(req: NextRequest) {
             imageType,
           });
 
+          const etag = await getOGImageVersion("generic");
           const img = new ImageResponse(<Generic title={title} description={description} />, ogConfig);
 
           return new Response(img.body, {
             status: 200,
             headers: {
               "Content-Type": "image/png",
-              "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400",
+              "Cache-Control":
+                "public, max-age=31536000, immutable, s-maxage=31536000, stale-while-revalidate=31536000",
+              ETag: `"${etag}"`,
             },
           });
         } catch (error) {
@@ -178,9 +198,9 @@ async function handler(req: NextRequest) {
       }
 
       default:
-        return new Response("What you're looking for is not here..", { status: 404 });
+        return new Response("Wrong image type", { status: 404 });
     }
-  } catch (error) {
+  } catch {
     return new Response("Internal server error", { status: 500 });
   }
 }

apps/web/app/api/social/og/image/types.d.ts

@@ -0,0 +1,4 @@
+declare module "@calcom/web/public/app-store/svg-hashes.json" {
+  const value: Record<string, string>;
+  export default value;
+}

apps/web/app/icons/page.tsx

@@ -10,13 +10,10 @@ import { lucideIconList } from "../../../../packages/ui/components/icon/icon-lis
 import { IconGrid } from "./IconGrid";
 
 export const dynamic = "force-static";
-export const metadata: Metadata = _generateMetadataForStaticPage(
-  "Icons Showcase",
-  "",
-  undefined,
-  undefined,
-  "/icons"
-);
+
+export async function generateMetadata(): Promise<Metadata> {
+  return await _generateMetadataForStaticPage("Icons Showcase", "", undefined, undefined, "/icons");
+}
 
 const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
 const calFont = localFont({

apps/web/scripts/copy-app-store-static.js

@@ -1,30 +1,45 @@
 const fs = require("fs");
 const path = require("path");
 const glob = require("glob");
+const crypto = require("crypto");
 
 const copyAppStoreStatic = () => {
   // Get all static files from app-store packages
   const staticFiles = glob.sync("../../packages/app-store/**/static/**/*", { nodir: true });
 
+  // Object to store icon SVG hashes
+  const SVG_HASHES = {};
+
   staticFiles.forEach((file) => {
     // Extract app name from path
     const appNameMatch = file.match(/app-store\/(.*?)\/static/);
     if (!appNameMatch) return;
 
-    const appName = appNameMatch[1];
+    const appDirName = appNameMatch[1];
     const fileName = path.basename(file);
-
     // Create destination directory if it doesn't exist
-    const destDir = path.join(process.cwd(), "public", "app-store", appName);
+    const destDir = path.join(process.cwd(), "public", "app-store", appDirName);
     if (!fs.existsSync(destDir)) {
       fs.mkdirSync(destDir, { recursive: true });
     }
 
     // Copy file to destination (Turborepo caching handles change detection)
     const destPath = path.join(destDir, fileName);
     fs.copyFileSync(file, destPath);
+
+    // If it's an icon SVG file, compute hash
+    if (fileName.includes("icon") && fileName.endsWith(".svg")) {
+      const content = fs.readFileSync(file, "utf8");
+      const hash = crypto.createHash("md5").update(content).digest("hex").slice(0, 8);
+      SVG_HASHES[appDirName] = hash;
+    }
+
     console.log(`Copied ${file} to ${destPath}`);
   });
+
+  // Write SVG hashes to a JSON file
+  const hashFilePath = path.join(process.cwd(), "public", "app-store", "svg-hashes.json");
+  fs.writeFileSync(hashFilePath, JSON.stringify(SVG_HASHES, null, 2));
 };
 
 // Run the copy function