From 9c94c0b56b4cb0d4d952c9100578b0fb6154f691 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 7 Sep 2023 17:28:39 -0500
Subject: [PATCH] Stop caching og images for logged in users

---
 src/app/(isr)/photos/[photoId]/image/route.tsx | 13 ++++---------
 src/app/(isr)/template-image-tight/route.tsx   | 12 ++++--------
 src/app/(isr)/template-image/route.tsx         | 10 +++-------
 src/cache/index.ts                             | 11 +++++++++++
 4 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/app/(isr)/photos/[photoId]/image/route.tsx b/src/app/(isr)/photos/[photoId]/image/route.tsx
index 45a8539a..986e67db 100644
--- a/src/app/(isr)/photos/[photoId]/image/route.tsx
+++ b/src/app/(isr)/photos/[photoId]/image/route.tsx
@@ -1,20 +1,19 @@
+import { getImageCacheHeadersForAuth } from '@/cache';
 import PhotoOGImageResponse from '@/photo/image-response/PhotoOGImageResponse';
 import { getPhoto } from '@/services/postgres';
 import { IMAGE_OG_WIDTH, IMAGE_OG_HEIGHT } from '@/site';
 import { FONT_FAMILY_IBM_PLEX_MONO, getIBMPlexMonoMedium } from '@/site/font';
 import { ImageResponse } from '@vercel/og';
 
-const DEBUG_CACHING: boolean = false;
-
 export const runtime = 'edge';
 
 export async function GET(request: Request, context: any) {
   const photo = await getPhoto(context.params.photoId);
+  const fontData = await getIBMPlexMonoMedium();
+  const headers = await getImageCacheHeadersForAuth();
   
   if (!photo) { return null; }
   
-  const fontData = await getIBMPlexMonoMedium();
-
   return new ImageResponse(
     (
       <PhotoOGImageResponse
@@ -36,11 +35,7 @@ export async function GET(request: Request, context: any) {
           style: 'normal',
         },
       ],
-      ...!DEBUG_CACHING && {
-        headers: {
-          'Cache-Control': 's-maxage=3600, stale-while-revalidate',
-        },
-      },
+      headers,
     },
   );
 }
diff --git a/src/app/(isr)/template-image-tight/route.tsx b/src/app/(isr)/template-image-tight/route.tsx
index 57689577..494595f8 100644
--- a/src/app/(isr)/template-image-tight/route.tsx
+++ b/src/app/(isr)/template-image-tight/route.tsx
@@ -1,16 +1,16 @@
+import { getImageCacheHeadersForAuth } from '@/cache';
 import DeployImageResponse from '@/photo/image-response/DeployImageResponse';
 import { getPhotos } from '@/services/postgres';
 import { FONT_FAMILY_IBM_PLEX_MONO, getIBMPlexMonoMedium } from '@/site/font';
 import { ImageResponse } from '@vercel/og';
 
-const DEBUG_CACHING: boolean = true;
-
 export const runtime = 'edge';
 
 export async function GET(request: Request) {
   const photos = await getPhotos('priority');
   const fontData = await getIBMPlexMonoMedium();
-  
+  const headers = await getImageCacheHeadersForAuth();
+
   return new ImageResponse(
     (
       <DeployImageResponse {...{
@@ -34,11 +34,7 @@ export async function GET(request: Request) {
           style: 'normal',
         },
       ],
-      headers: {
-        'Cache-Control': DEBUG_CACHING
-          ? 's-maxage=1'
-          : 's-maxage=3600, stale-while-revalidate',
-      },
+      headers,
     },
   );
 }
diff --git a/src/app/(isr)/template-image/route.tsx b/src/app/(isr)/template-image/route.tsx
index 7f98b508..c5348632 100644
--- a/src/app/(isr)/template-image/route.tsx
+++ b/src/app/(isr)/template-image/route.tsx
@@ -1,16 +1,16 @@
+import { getImageCacheHeadersForAuth } from '@/cache';
 import DeployImageResponse from '@/photo/image-response/DeployImageResponse';
 import { getPhotos } from '@/services/postgres';
 import { GRID_OG_WIDTH, GRID_OG_HEIGHT } from '@/site';
 import { FONT_FAMILY_IBM_PLEX_MONO, getIBMPlexMonoMedium } from '@/site/font';
 import { ImageResponse } from '@vercel/og';
 
-const DEBUG_CACHING: boolean = true;
-
 export const runtime = 'edge';
 
 export async function GET(request: Request) {
   const photos = await getPhotos('priority');
   const fontData = await getIBMPlexMonoMedium();
+  const headers = await getImageCacheHeadersForAuth();
   
   return new ImageResponse(
     (
@@ -32,11 +32,7 @@ export async function GET(request: Request) {
           style: 'normal',
         },
       ],
-      headers: {
-        'Cache-Control': DEBUG_CACHING
-          ? 's-maxage=1'
-          : 's-maxage=3600, stale-while-revalidate',
-      },
+      headers,
     },
   );
 }
diff --git a/src/cache/index.ts b/src/cache/index.ts
index 72bfe360..8d3b8e46 100644
--- a/src/cache/index.ts
+++ b/src/cache/index.ts
@@ -1,3 +1,4 @@
+import { auth } from '@/auth';
 import { getPhoto, getPhotos } from '@/services/postgres';
 import { revalidatePath, revalidateTag, unstable_cache } from 'next/cache';
 
@@ -40,3 +41,13 @@ export const getPhotoCached: typeof getPhoto = (...args) =>
       tags: [TAG_PHOTOS, tagForPhoto(...args)],
     }
   )();
+
+export const getImageCacheHeadersForAuth = async () => {
+  const session = await auth();
+  const shouldCacheRequest = !session?.user;
+  return {
+    'Cache-Control': shouldCacheRequest
+      ? 's-maxage=3600, stale-while-revalidate'
+      : 's-maxage=1, stale-while-revalidate',
+  };
+};