Stop caching og images for logged in users

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,
     },
   );
 }

src/app/(isr)/template-image-tight/route.tsx

@@ -1,15 +1,15 @@
+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(
     (
@@ -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,
     },
   );
 }

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,
     },
   );
 }

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',
+  };
+};