チャットをキャッシュ

Author: na-trium-144

app/(docs)/@chat/chat/[chatId]/page.tsx

@@ -1,6 +1,14 @@
-import { getChatOne, initContext } from "@/lib/chatHistory";
+import {
+  cacheKeyForChat,
+  cacheKeyForPage,
+  ChatWithMessages,
+  getChatOne,
+  initContext,
+} from "@/lib/chatHistory";
 import { getMarkdownSections, getPagesList } from "@/lib/docs";
 import { ChatAreaContainer, ChatAreaContent } from "./chatArea";
+import { unstable_cacheLife, unstable_cacheTag } from "next/cache";
+import { isCloudflare } from "@/lib/detectCloudflare";
 
 export default async function ChatPage({
   params,
@@ -9,8 +17,8 @@ export default async function ChatPage({
 }) {
   const { chatId } = await params;
 
-  const ctx = await initContext();
-  const chatData = await getChatOne(chatId, ctx);
+  const context = await initContext();
+  const chatData = await getChatOneFromCache(chatId, context.userId);
 
   if (!chatData) {
     // notFound(); だとページ全体が404になってしまう
@@ -43,3 +51,26 @@ export default async function ChatPage({
     </ChatAreaContainer>
   );
 }
+
+async function getChatOneFromCache(chatId: string, userId?: string) {
+  "use cache";
+  unstable_cacheLife("days");
+  unstable_cacheTag(cacheKeyForChat(chatId));
+
+  if (!userId) {
+    return null;
+  }
+
+  if (isCloudflare()) {
+    const cache = await caches.open("chatHistory");
+    const cachedResponse = await cache.match(cacheKeyForChat(chatId));
+    if (cachedResponse) {
+      const data = (await cachedResponse.json()) as ChatWithMessages;
+      return data;
+    }
+  }
+
+  const context = await initContext({ userId });
+  const chatData = await getChatOne(chatId, context);
+  return chatData;
+}

app/lib/chatHistory.ts

@@ -24,6 +24,27 @@ const CACHE_KEY_BASE = "https://my-code.utcode.net/chatHistory";
 export function cacheKeyForPage(path: PagePath, userId: string) {
   return `${CACHE_KEY_BASE}/getChat?path=${path.lang}/${path.page}&userId=${userId}`;
 }
+export function cacheKeyForChat(chatId: string) {
+  return `${CACHE_KEY_BASE}/getChatOne?chatId=${chatId}`;
+}
+
+async function revalidateChat(
+  chatId: string,
+  userId: string,
+  pagePath: string | PagePath
+) {
+  if (typeof pagePath === "string") {
+    const [lang, page] = pagePath.split("/") as [LangId, PageSlug];
+    pagePath = { lang, page };
+  }
+  revalidateTag(cacheKeyForChat(chatId));
+  revalidateTag(cacheKeyForPage(pagePath, userId));
+  if (isCloudflare()) {
+    const cache = await caches.open("chatHistory");
+    await cache.delete(cacheKeyForChat(chatId));
+    await cache.delete(cacheKeyForPage(pagePath, userId));
+  }
+}
 
 interface Context {
   drizzle: Awaited<ReturnType<typeof getDrizzle>>;
@@ -105,14 +126,7 @@ export async function addChat(
     chatDiffs = [] as never[];
   }
 
-  revalidateTag(cacheKeyForPage(path, userId));
-  if (isCloudflare()) {
-    const cache = await caches.open("chatHistory");
-    console.log(
-      `deleting cache for chatHistory/getChat for user ${userId} and docs ${path.lang}/${path.page}`
-    );
-    await cache.delete(cacheKeyForPage(path, userId));
-  }
+  await revalidateChat(newChat.chatId, userId, path);
 
   return {
     ...newChat,
@@ -145,18 +159,7 @@ export async function deleteChat(chatId: string, context: Context) {
   const targetSection = await drizzle.query.section.findFirst({
     where: eq(section.sectionId, deletedChat[0].sectionId),
   });
-  const [lang, page] = (targetSection?.pagePath.split("/") ?? []) as [
-    LangId,
-    PageSlug,
-  ];
-  revalidateTag(cacheKeyForPage({ lang, page }, userId));
-  if (isCloudflare()) {
-    const cache = await caches.open("chatHistory");
-    console.log(
-      `deleting cache for chatHistory/getChat for user ${userId} and docs ${lang}/${page}`
-    );
-    await cache.delete(cacheKeyForPage({ lang, page }, userId));
-  }
+  await revalidateChat(chatId, userId, targetSection?.pagePath ?? "");
 }
 
 export async function getAllChat(