feat: 밈 썸네일 이미지 캐싱

- 캐싱을 적용하여 Meme 데이터를 가져오는 기능을 추가함
- 메타 태그 업데이트 로직을 별도의 함수로 분리하여 코드 가독성을 향상시킴
- 응답에 캐싱 헤더를 추가하여 성능 개선을 도모함

Author: Cllaude99

apps/web/middleware.ts

@@ -2,84 +2,102 @@ export const config = {
   matcher: ['/meme/:memeId'],
 };
 
-export default async function middleware(request: Request) {
-  const url = new URL(request.url);
-  const memeId = url.pathname.split('/').pop();
+const CACHE_REVALIDATE_TIME = 3600; // 1시간
+const API_ENDPOINT = 'https://api.meme-wiki.net/api/memes';
+
+// 메타 데이터 타입 정의
+interface MemeMetadata {
+  success: {
+    title: string;
+    usageContext: string;
+    imgUrl: string;
+  };
+}
 
-  // /meme/{id} 경로에 대한 처리
+async function fetchMemeData(memeId: string): Promise<MemeMetadata | null> {
   try {
-    const response = await fetch(
-      `https://api.meme-wiki.net/api/memes/${memeId}`,
-      {
-        headers: {
-          Accept: 'application/json',
-        },
+    const response = await fetch(`${API_ENDPOINT}/${memeId}`, {
+      headers: {
+        Accept: 'application/json',
+        'Cache-Control': `public, max-age=${CACHE_REVALIDATE_TIME}`,
       },
-    );
+    });
 
     if (!response.ok) {
-      const res = await fetch(new URL('/', request.url));
-      const html = await res.text();
-      return new Response(html, {
-        status: 200,
-        headers: {
-          'content-type': 'text/html;charset=UTF-8',
-        },
-      });
+      return null;
     }
 
-    const data = await response.json();
+    return await response.json();
+  } catch (error) {
+    console.error('Error fetching meme data:', error);
+    return null;
+  }
+}
+
+function updateMetaTags(
+  html: string,
+  data: MemeMetadata['success'],
+  url: URL,
+  memeId: string,
+): string {
+  const metaTags = {
+    'og:title': `${data.title} - Meme Wiki`,
+    'og:description': data.usageContext,
+    'og:image': data.imgUrl,
+    'og:url': `${url.origin}/meme/${memeId}`,
+    'twitter:title': `${data.title} - Meme Wiki`,
+    'twitter:description': data.usageContext,
+    'twitter:image': data.imgUrl,
+  };
+
+  let modifiedHtml = html;
+
+  // 한 번의 순회로 모든 메타 태그 업데이트
+  Object.entries(metaTags).forEach(([property, content]) => {
+    modifiedHtml = modifiedHtml.replace(
+      new RegExp(
+        `<meta\\s+property="${property}"\\s+content="[^"]*"[^>]*>`,
+        'i',
+      ),
+      `<meta property="${property}" content="${content}" />`,
+    );
+  });
+
+  return modifiedHtml;
+}
 
+export default async function middleware(request: Request) {
+  const url = new URL(request.url);
+  const memeId = url.pathname.split('/').pop();
+
+  if (!memeId) {
+    return Response.redirect(new URL('/', request.url));
+  }
+
+  try {
+    // 메메 데이터 가져오기 (캐싱 적용)
+    const memeData = await fetchMemeData(memeId);
+
+    if (!memeData) {
+      return Response.redirect(new URL('/', request.url));
+    }
+
+    // 기본 HTML 가져오기
     const res = await fetch(new URL('/', request.url));
     const html = await res.text();
 
-    const modifiedHtml = html
-      .replace(
-        /<meta\s+property="og:title"\s+content="[^"]*"[^>]*>/,
-        `<meta property="og:title" content="${data.success.title} - Meme Wiki" />`,
-      )
-      .replace(
-        /<meta\s+property="og:description"\s+content="[^"]*"[^>]*>/,
-        `<meta property="og:description" content="${data.success.usageContext}" />`,
-      )
-      .replace(
-        /<meta\s+property="og:image"\s+content="[^"]*"[^>]*>/,
-        `<meta property="og:image" content="${data.success.imgUrl}" />`,
-      )
-      .replace(
-        /<meta\s+property="og:url"\s+content="[^"]*"[^>]*>/,
-        `<meta property="og:url" content="${url.origin}/meme/${memeId}" />`,
-      )
-      .replace(
-        /<meta\s+property="twitter:title"\s+content="[^"]*"[^>]*>/,
-        `<meta property="twitter:title" content="${data.success.title} - Meme Wiki" />`,
-      )
-      .replace(
-        /<meta\s+property="twitter:description"\s+content="[^"]*"[^>]*>/,
-        `<meta property="twitter:description" content="${data.success.usageContext}" />`,
-      )
-      .replace(
-        /<meta\s+property="twitter:image"\s+content="[^"]*"[^>]*>/,
-        `<meta property="twitter:image" content="${data.success.imgUrl}" />`,
-      );
+    // 메타 태그 업데이트
+    const modifiedHtml = updateMetaTags(html, memeData.success, url, memeId);
 
+    // 응답 반환 (캐싱 헤더 포함)
     return new Response(modifiedHtml, {
       headers: {
         'content-type': 'text/html;charset=UTF-8',
-        'x-middleware-cache': 'no-cache',
-        'cache-control': 'no-cache, no-store, must-revalidate',
-        pragma: 'no-cache',
-        expires: '0',
+        'cache-control': `public, s-maxage=${CACHE_REVALIDATE_TIME}, stale-while-revalidate`,
       },
     });
   } catch (error) {
-    const res = await fetch(new URL('/', request.url));
-    const html = await res.text();
-    return new Response(html, {
-      status: 200,
-      headers: {
-        'content-type': 'text/html;charset=UTF-8',
-      },
-    });
+    console.error('Middleware error:', error);
+    return Response.redirect(new URL('/', request.url));
   }
 }