From 513942be0e3d4cdfc92d202853f83642f33f3e93 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 00:26:42 +0900
Subject: [PATCH 01/21] Optimize client performance and stabilize DM pages

---
 application/client/babel.config.js            |   4 +-
 application/client/package.json               |   2 +-
 .../src/components/application/SearchPage.tsx |   6 +-
 .../direct_message/DirectMessageListPage.tsx  |  10 +-
 .../DirectMessageNotificationBadge.tsx        |  10 +-
 .../direct_message/DirectMessagePage.tsx      |  14 +--
 .../components/foundation/InfiniteScroll.tsx  |  61 +++++-----
 .../new_post_modal/NewPostModalPage.tsx       |  72 +++++++-----
 .../src/components/post/TranslatableText.tsx  |   5 +-
 .../client/src/containers/AppContainer.tsx    |  17 ++-
 .../src/containers/AuthModalContainer.tsx     |  38 +++---
 .../src/containers/DirectMessageContainer.tsx |  42 ++++---
 .../src/containers/NewPostModalContainer.tsx  |  32 +++--
 .../client/src/containers/PostContainer.tsx   |   4 +-
 .../client/src/containers/SearchContainer.tsx |   4 +-
 .../src/containers/TimelineContainer.tsx      |   7 +-
 .../src/containers/UserProfileContainer.tsx   |   4 +-
 .../client/src/hooks/use_infinite_fetch.ts    |  42 +++++--
 application/client/src/hooks/use_ws.ts        |  29 ++++-
 application/client/src/index.html             |   2 +-
 application/client/src/index.tsx              |   8 +-
 application/client/src/utils/fetchers.ts      | 109 +++++++++++++-----
 application/client/webpack.config.js          |  29 +++--
 23 files changed, 352 insertions(+), 199 deletions(-)

diff --git a/application/client/babel.config.js b/application/client/babel.config.js
index c3c574591a..c74320dd37 100644
--- a/application/client/babel.config.js
+++ b/application/client/babel.config.js
@@ -6,14 +6,14 @@ module.exports = {
       {
         targets: "ie 11",
         corejs: "3",
-        modules: "commonjs",
+        modules: false,
         useBuiltIns: false,
       },
     ],
     [
       "@babel/preset-react",
       {
-        development: true,
+        development: process.env.NODE_ENV !== "production",
         runtime: "automatic",
       },
     ],
diff --git a/application/client/package.json b/application/client/package.json
index 9f8e80a6a8..af2d3a5156 100644
--- a/application/client/package.json
+++ b/application/client/package.json
@@ -5,7 +5,7 @@
   "license": "MPL-2.0",
   "author": "CyberAgent, Inc.",
   "scripts": {
-    "build": "NODE_ENV=development webpack",
+    "build": "NODE_ENV=production webpack",
     "typecheck": "tsc"
   },
   "dependencies": {
diff --git a/application/client/src/components/application/SearchPage.tsx b/application/client/src/components/application/SearchPage.tsx
index e99045de45..519c919f1a 100644
--- a/application/client/src/components/application/SearchPage.tsx
+++ b/application/client/src/components/application/SearchPage.tsx
@@ -9,7 +9,6 @@ import {
 } from "@web-speed-hackathon-2026/client/src/search/services";
 import { SearchFormData } from "@web-speed-hackathon-2026/client/src/search/types";
 import { validate } from "@web-speed-hackathon-2026/client/src/search/validation";
-import { analyzeSentiment } from "@web-speed-hackathon-2026/client/src/utils/negaposi_analyzer";
 
 import { Button } from "../foundation/Button";
 
@@ -53,7 +52,8 @@ const SearchPageComponent = ({
     }
 
     let isMounted = true;
-    analyzeSentiment(parsed.keywords)
+    void import("@web-speed-hackathon-2026/client/src/utils/negaposi_analyzer")
+      .then(({ analyzeSentiment }) => analyzeSentiment(parsed.keywords))
       .then((result) => {
         if (isMounted) {
           setIsNegative(result.label === "negative");
@@ -82,7 +82,7 @@ const SearchPageComponent = ({
       parts.push(`${parsed.untilDate} 以前`);
     }
     return parts.join(" ");
-  }, [parsed]);
+  }, [parsed.keywords, parsed.sinceDate, parsed.untilDate]);
 
   const onSubmit = (values: SearchFormData) => {
     const sanitizedText = sanitizeSearchText(values.searchText.trim());
diff --git a/application/client/src/components/direct_message/DirectMessageListPage.tsx b/application/client/src/components/direct_message/DirectMessageListPage.tsx
index 5a373e918e..fa671f2fb1 100644
--- a/application/client/src/components/direct_message/DirectMessageListPage.tsx
+++ b/application/client/src/components/direct_message/DirectMessageListPage.tsx
@@ -37,9 +37,13 @@ export const DirectMessageListPage = ({ activeUser, newDmModalId }: Props) => {
     void loadConversations();
   }, [loadConversations]);
 
-  useWs("/api/v1/dm/unread", () => {
-    void loadConversations();
-  });
+  useWs(
+    "/api/v1/dm/unread",
+    () => {
+      void loadConversations();
+    },
+    { delayMs: 5000 },
+  );
 
   if (conversations == null) {
     return null;
diff --git a/application/client/src/components/direct_message/DirectMessageNotificationBadge.tsx b/application/client/src/components/direct_message/DirectMessageNotificationBadge.tsx
index 84b62972fa..e50d40fb84 100644
--- a/application/client/src/components/direct_message/DirectMessageNotificationBadge.tsx
+++ b/application/client/src/components/direct_message/DirectMessageNotificationBadge.tsx
@@ -13,9 +13,13 @@ export const DirectMessageNotificationBadge = () => {
   const [unreadCount, updateUnreadCount] = useState(0);
   const displayCount = unreadCount > 99 ? "99+" : String(unreadCount);
 
-  useWs("/api/v1/dm/unread", (event: DmUnreadEvent) => {
-    updateUnreadCount(event.payload.unreadCount);
-  });
+  useWs(
+    "/api/v1/dm/unread",
+    (event: DmUnreadEvent) => {
+      updateUnreadCount(event.payload.unreadCount);
+    },
+    { delayMs: 5000 },
+  );
 
   if (unreadCount === 0) {
     return null;
diff --git a/application/client/src/components/direct_message/DirectMessagePage.tsx b/application/client/src/components/direct_message/DirectMessagePage.tsx
index 098c7d2894..96f124d2e6 100644
--- a/application/client/src/components/direct_message/DirectMessagePage.tsx
+++ b/application/client/src/components/direct_message/DirectMessagePage.tsx
@@ -43,8 +43,6 @@ export const DirectMessagePage = ({
   const [text, setText] = useState("");
   const textAreaRows = Math.min((text || "").split("\n").length, 5);
   const isInvalid = text.trim().length === 0;
-  const scrollHeightRef = useRef(0);
-
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLTextAreaElement>) => {
       setText(event.target.value);
@@ -74,16 +72,8 @@ export const DirectMessagePage = ({
   );
 
   useEffect(() => {
-    const id = setInterval(() => {
-      const height = Number(window.getComputedStyle(document.body).height.replace("px", ""));
-      if (height !== scrollHeightRef.current) {
-        scrollHeightRef.current = height;
-        window.scrollTo(0, height);
-      }
-    }, 1);
-
-    return () => clearInterval(id);
-  }, []);
+    window.scrollTo(0, document.body.scrollHeight);
+  }, [conversation.messages.length, isPeerTyping]);
 
   if (conversationError != null) {
     return (
diff --git a/application/client/src/components/foundation/InfiniteScroll.tsx b/application/client/src/components/foundation/InfiniteScroll.tsx
index 408f24c107..f59bde8ea0 100644
--- a/application/client/src/components/foundation/InfiniteScroll.tsx
+++ b/application/client/src/components/foundation/InfiniteScroll.tsx
@@ -2,48 +2,41 @@ import { ReactNode, useEffect, useRef } from "react";
 
 interface Props {
   children: ReactNode;
-  items: any[];
+  hasMore: boolean;
+  items: unknown[];
   fetchMore: () => void;
 }
 
-export const InfiniteScroll = ({ children, fetchMore, items }: Props) => {
-  const latestItem = items[items.length - 1];
-
-  const prevReachedRef = useRef(false);
+export const InfiniteScroll = ({ children, fetchMore, hasMore, items }: Props) => {
+  const sentinelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const handler = () => {
-      // 念の為 2の18乗 回、最下部かどうかを確認する
-      const hasReached = Array.from(Array(2 ** 18), () => {
-        return window.innerHeight + Math.ceil(window.scrollY) >= document.body.offsetHeight;
-      }).every(Boolean);
-
-      // 画面最下部にスクロールしたタイミングで、登録したハンドラを呼び出す
-      if (hasReached && !prevReachedRef.current) {
-        // アイテムがないときは追加で読み込まない
-        if (latestItem !== undefined) {
+    const element = sentinelRef.current;
+    if (element == null || !hasMore || items.length === 0) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
           fetchMore();
         }
-      }
-
-      prevReachedRef.current = hasReached;
-    };
-
-    // 最初は実行されないので手動で呼び出す
-    prevReachedRef.current = false;
-    handler();
+      },
+      {
+        rootMargin: "200px 0px",
+      },
+    );
 
-    document.addEventListener("wheel", handler, { passive: false });
-    document.addEventListener("touchmove", handler, { passive: false });
-    document.addEventListener("resize", handler, { passive: false });
-    document.addEventListener("scroll", handler, { passive: false });
+    observer.observe(element);
     return () => {
-      document.removeEventListener("wheel", handler);
-      document.removeEventListener("touchmove", handler);
-      document.removeEventListener("resize", handler);
-      document.removeEventListener("scroll", handler);
+      observer.disconnect();
     };
-  }, [latestItem, fetchMore]);
-
-  return <>{children}</>;
+  }, [fetchMore, hasMore, items.length]);
+
+  return (
+    <>
+      {children}
+      {hasMore ? <div ref={sentinelRef} className="h-px w-full" aria-hidden="true" /> : null}
+    </>
+  );
 };
diff --git a/application/client/src/components/new_post_modal/NewPostModalPage.tsx b/application/client/src/components/new_post_modal/NewPostModalPage.tsx
index e337c46b74..a6e1910863 100644
--- a/application/client/src/components/new_post_modal/NewPostModalPage.tsx
+++ b/application/client/src/components/new_post_modal/NewPostModalPage.tsx
@@ -1,13 +1,9 @@
-import { MagickFormat } from "@imagemagick/magick-wasm";
 import { ChangeEventHandler, FormEventHandler, useCallback, useState } from "react";
 
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { ModalErrorMessage } from "@web-speed-hackathon-2026/client/src/components/modal/ModalErrorMessage";
 import { ModalSubmitButton } from "@web-speed-hackathon-2026/client/src/components/modal/ModalSubmitButton";
 import { AttachFileInputButton } from "@web-speed-hackathon-2026/client/src/components/new_post_modal/AttachFileInputButton";
-import { convertImage } from "@web-speed-hackathon-2026/client/src/utils/convert_image";
-import { convertMovie } from "@web-speed-hackathon-2026/client/src/utils/convert_movie";
-import { convertSound } from "@web-speed-hackathon-2026/client/src/utils/convert_sound";
 
 const MAX_UPLOAD_BYTES_LIMIT = 10 * 1024 * 1024;
 
@@ -53,13 +49,19 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
     if (isValid) {
       setIsConverting(true);
 
-      Promise.all(
-        files.map((file) =>
-          convertImage(file, { extension: MagickFormat.Jpg }).then(
-            (blob) => new File([blob], "converted.jpg", { type: "image/jpeg" }),
+      void Promise.all([
+        import("@imagemagick/magick-wasm"),
+        import("@web-speed-hackathon-2026/client/src/utils/convert_image"),
+      ])
+        .then(([{ MagickFormat }, { convertImage }]) =>
+          Promise.all(
+            files.map((file) =>
+              convertImage(file, { extension: MagickFormat.Jpg }).then(
+                (blob) => new File([blob], "converted.jpg", { type: "image/jpeg" }),
+              ),
+            ),
           ),
-        ),
-      )
+        )
         .then((convertedFiles) => {
           setParams((params) => ({
             ...params,
@@ -67,10 +69,14 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
             movie: undefined,
             sound: undefined,
           }));
-
-          setIsConverting(false);
         })
-        .catch(console.error);
+        .catch((error) => {
+          console.error(error);
+          setHasFileError(true);
+        })
+        .finally(() => {
+          setIsConverting(false);
+        });
     }
   }, []);
 
@@ -82,16 +88,23 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
     if (isValid) {
       setIsConverting(true);
 
-      convertSound(file, { extension: "mp3" }).then((converted) => {
-        setParams((params) => ({
-          ...params,
-          images: [],
-          movie: undefined,
-          sound: new File([converted], "converted.mp3", { type: "audio/mpeg" }),
-        }));
-
-        setIsConverting(false);
-      });
+      void import("@web-speed-hackathon-2026/client/src/utils/convert_sound")
+        .then(({ convertSound }) => convertSound(file, { extension: "mp3" }))
+        .then((converted) => {
+          setParams((params) => ({
+            ...params,
+            images: [],
+            movie: undefined,
+            sound: new File([converted], "converted.mp3", { type: "audio/mpeg" }),
+          }));
+        })
+        .catch((error) => {
+          console.error(error);
+          setHasFileError(true);
+        })
+        .finally(() => {
+          setIsConverting(false);
+        });
     }
   }, []);
 
@@ -103,7 +116,8 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
     if (isValid) {
       setIsConverting(true);
 
-      convertMovie(file, { extension: "gif", size: undefined })
+      void import("@web-speed-hackathon-2026/client/src/utils/convert_movie")
+        .then(({ convertMovie }) => convertMovie(file, { extension: "gif", size: undefined }))
         .then((converted) => {
           setParams((params) => ({
             ...params,
@@ -113,10 +127,14 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
             }),
             sound: undefined,
           }));
-
-          setIsConverting(false);
         })
-        .catch(console.error);
+        .catch((error) => {
+          console.error(error);
+          setHasFileError(true);
+        })
+        .finally(() => {
+          setIsConverting(false);
+        });
     }
   }, []);
 
diff --git a/application/client/src/components/post/TranslatableText.tsx b/application/client/src/components/post/TranslatableText.tsx
index d772529d92..b099174f0a 100644
--- a/application/client/src/components/post/TranslatableText.tsx
+++ b/application/client/src/components/post/TranslatableText.tsx
@@ -1,7 +1,5 @@
 import { useCallback, useState } from "react";
 
-import { createTranslator } from "@web-speed-hackathon-2026/client/src/utils/create_translator";
-
 type State =
   | { type: "idle"; text: string }
   | { type: "loading" }
@@ -20,6 +18,9 @@ export const TranslatableText = ({ text }: Props) => {
         (async () => {
           updateState({ type: "loading" });
           try {
+            const { createTranslator } = await import(
+              "@web-speed-hackathon-2026/client/src/utils/create_translator"
+            );
             using translator = await createTranslator({
               sourceLanguage: "ja",
               targetLanguage: "en",
diff --git a/application/client/src/containers/AppContainer.tsx b/application/client/src/containers/AppContainer.tsx
index d66858a949..a1501253e0 100644
--- a/application/client/src/containers/AppContainer.tsx
+++ b/application/client/src/containers/AppContainer.tsx
@@ -1,10 +1,9 @@
-import { useCallback, useEffect, useId, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useId, useState } from "react";
 import { Helmet, HelmetProvider } from "react-helmet";
 import { Route, Routes, useLocation, useNavigate } from "react-router";
 
 import { AppPage } from "@web-speed-hackathon-2026/client/src/components/application/AppPage";
 import { AuthModalContainer } from "@web-speed-hackathon-2026/client/src/containers/AuthModalContainer";
-import { CrokContainer } from "@web-speed-hackathon-2026/client/src/containers/CrokContainer";
 import { DirectMessageContainer } from "@web-speed-hackathon-2026/client/src/containers/DirectMessageContainer";
 import { DirectMessageListContainer } from "@web-speed-hackathon-2026/client/src/containers/DirectMessageListContainer";
 import { NewPostModalContainer } from "@web-speed-hackathon-2026/client/src/containers/NewPostModalContainer";
@@ -16,6 +15,11 @@ import { TimelineContainer } from "@web-speed-hackathon-2026/client/src/containe
 import { UserProfileContainer } from "@web-speed-hackathon-2026/client/src/containers/UserProfileContainer";
 import { fetchJSON, sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
+const LazyCrokContainer = lazy(async () => {
+  const module = await import("@web-speed-hackathon-2026/client/src/containers/CrokContainer");
+  return { default: module.CrokContainer };
+});
+
 export const AppContainer = () => {
   const { pathname } = useLocation();
   const navigate = useNavigate();
@@ -30,6 +34,9 @@ export const AppContainer = () => {
       .then((user) => {
         setActiveUser(user);
       })
+      .catch(() => {
+        setActiveUser(null);
+      })
       .finally(() => {
         setIsLoadingActiveUser(false);
       });
@@ -78,7 +85,11 @@ export const AppContainer = () => {
           <Route element={<PostContainer />} path="/posts/:postId" />
           <Route element={<TermContainer />} path="/terms" />
           <Route
-            element={<CrokContainer activeUser={activeUser} authModalId={authModalId} />}
+            element={
+              <Suspense fallback={null}>
+                <LazyCrokContainer activeUser={activeUser} authModalId={authModalId} />
+              </Suspense>
+            }
             path="/crok"
           />
           <Route element={<NotFoundContainer />} path="*" />
diff --git a/application/client/src/containers/AuthModalContainer.tsx b/application/client/src/containers/AuthModalContainer.tsx
index 8d159f3528..33e237ada8 100644
--- a/application/client/src/containers/AuthModalContainer.tsx
+++ b/application/client/src/containers/AuthModalContainer.tsx
@@ -1,10 +1,14 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
 import { SubmissionError } from "redux-form";
 
 import { AuthFormData } from "@web-speed-hackathon-2026/client/src/auth/types";
-import { AuthModalPage } from "@web-speed-hackathon-2026/client/src/components/auth_modal/AuthModalPage";
 import { Modal } from "@web-speed-hackathon-2026/client/src/components/modal/Modal";
-import { sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
+import { HTTPError, sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
+
+const LazyAuthModalPage = lazy(async () => {
+  const module = await import("@web-speed-hackathon-2026/client/src/components/auth_modal/AuthModalPage");
+  return { default: module.AuthModalPage };
+});
 
 interface Props {
   id: string;
@@ -16,14 +20,14 @@ const ERROR_MESSAGES: Record<string, string> = {
   USERNAME_TAKEN: "ユーザー名が使われています",
 };
 
-function getErrorCode(err: JQuery.jqXHR<unknown>, type: "signin" | "signup"): string {
-  const responseJSON = err.responseJSON;
+function getErrorCode(err: unknown, type: "signin" | "signup"): string {
+  const responseJSON = err instanceof HTTPError ? err.responseJSON : null;
   if (
     typeof responseJSON !== "object" ||
     responseJSON === null ||
     !("code" in responseJSON) ||
-    typeof responseJSON.code !== "string" ||
-    !Object.keys(ERROR_MESSAGES).includes(responseJSON.code)
+    typeof responseJSON["code"] !== "string" ||
+    !Object.keys(ERROR_MESSAGES).includes(responseJSON["code"])
   ) {
     if (type === "signup") {
       return "登録に失敗しました";
@@ -32,11 +36,12 @@ function getErrorCode(err: JQuery.jqXHR<unknown>, type: "signin" | "signup"): st
     }
   }
 
-  return ERROR_MESSAGES[responseJSON.code]!;
+  return ERROR_MESSAGES[responseJSON["code"]]!;
 }
 
 export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
   const ref = useRef<HTMLDialogElement>(null);
+  const [hasOpened, setHasOpened] = useState(false);
   const [resetKey, setResetKey] = useState(0);
   useEffect(() => {
     if (!ref.current) return;
@@ -45,6 +50,7 @@ export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
     const handleToggle = () => {
       // モーダル開閉時にkeyを更新することでフォームの状態をリセットする
       setResetKey((key) => key + 1);
+      setHasOpened((current) => current || element.open);
     };
     element.addEventListener("toggle", handleToggle);
     return () => {
@@ -68,7 +74,7 @@ export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
         }
         handleRequestCloseModal();
       } catch (err: unknown) {
-        const error = getErrorCode(err as JQuery.jqXHR<unknown>, values.type);
+        const error = getErrorCode(err, values.type);
         throw new SubmissionError({
           _error: error,
         });
@@ -79,11 +85,15 @@ export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
 
   return (
     <Modal id={id} ref={ref} closedby="any">
-      <AuthModalPage
-        key={resetKey}
-        onRequestCloseModal={handleRequestCloseModal}
-        onSubmit={handleSubmit}
-      />
+      {hasOpened ? (
+        <Suspense fallback={null}>
+          <LazyAuthModalPage
+            key={resetKey}
+            onRequestCloseModal={handleRequestCloseModal}
+            onSubmit={handleSubmit}
+          />
+        </Suspense>
+      ) : null}
     </Modal>
   );
 };
diff --git a/application/client/src/containers/DirectMessageContainer.tsx b/application/client/src/containers/DirectMessageContainer.tsx
index 245deac8a6..145b6b00d7 100644
--- a/application/client/src/containers/DirectMessageContainer.tsx
+++ b/application/client/src/containers/DirectMessageContainer.tsx
@@ -80,28 +80,32 @@ export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
     void sendJSON(`/api/v1/dm/${conversationId}/typing`, {});
   }, [conversationId]);
 
-  useWs(`/api/v1/dm/${conversationId}`, (event: DmUpdateEvent | DmTypingEvent) => {
-    if (event.type === "dm:conversation:message") {
-      void loadConversation().then(() => {
-        if (event.payload.sender.id !== activeUser?.id) {
-          setIsPeerTyping(false);
-          if (peerTypingTimeoutRef.current !== null) {
-            clearTimeout(peerTypingTimeoutRef.current);
+  useWs(
+    `/api/v1/dm/${conversationId}`,
+    (event: DmUpdateEvent | DmTypingEvent) => {
+      if (event.type === "dm:conversation:message") {
+        void loadConversation().then(() => {
+          if (event.payload.sender.id !== activeUser?.id) {
+            setIsPeerTyping(false);
+            if (peerTypingTimeoutRef.current !== null) {
+              clearTimeout(peerTypingTimeoutRef.current);
+            }
+            peerTypingTimeoutRef.current = null;
           }
-          peerTypingTimeoutRef.current = null;
+        });
+        void sendRead();
+      } else if (event.type === "dm:conversation:typing") {
+        setIsPeerTyping(true);
+        if (peerTypingTimeoutRef.current !== null) {
+          clearTimeout(peerTypingTimeoutRef.current);
         }
-      });
-      void sendRead();
-    } else if (event.type === "dm:conversation:typing") {
-      setIsPeerTyping(true);
-      if (peerTypingTimeoutRef.current !== null) {
-        clearTimeout(peerTypingTimeoutRef.current);
+        peerTypingTimeoutRef.current = setTimeout(() => {
+          setIsPeerTyping(false);
+        }, TYPING_INDICATOR_DURATION_MS);
       }
-      peerTypingTimeoutRef.current = setTimeout(() => {
-        setIsPeerTyping(false);
-      }, TYPING_INDICATOR_DURATION_MS);
-    }
-  });
+    },
+    { delayMs: 5000 },
+  );
 
   if (activeUser === null) {
     return (
diff --git a/application/client/src/containers/NewPostModalContainer.tsx b/application/client/src/containers/NewPostModalContainer.tsx
index ae9484e878..8ea916d711 100644
--- a/application/client/src/containers/NewPostModalContainer.tsx
+++ b/application/client/src/containers/NewPostModalContainer.tsx
@@ -1,10 +1,16 @@
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useId, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 
 import { Modal } from "@web-speed-hackathon-2026/client/src/components/modal/Modal";
-import { NewPostModalPage } from "@web-speed-hackathon-2026/client/src/components/new_post_modal/NewPostModalPage";
 import { sendFile, sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
+const LazyNewPostModalPage = lazy(async () => {
+  const module = await import(
+    "@web-speed-hackathon-2026/client/src/components/new_post_modal/NewPostModalPage"
+  );
+  return { default: module.NewPostModalPage };
+});
+
 interface SubmitParams {
   images: File[];
   movie: File | undefined;
@@ -32,6 +38,7 @@ interface Props {
 export const NewPostModalContainer = ({ id }: Props) => {
   const dialogId = useId();
   const ref = useRef<HTMLDialogElement>(null);
+  const [hasOpened, setHasOpened] = useState(false);
   const [resetKey, setResetKey] = useState(0);
   useEffect(() => {
     const element = ref.current;
@@ -42,6 +49,7 @@ export const NewPostModalContainer = ({ id }: Props) => {
     const handleToggle = () => {
       // モーダル開閉時にkeyを更新することでフォームの状態をリセットする
       setResetKey((key) => key + 1);
+      setHasOpened((current) => current || element.open);
     };
     element.addEventListener("toggle", handleToggle);
     return () => {
@@ -76,14 +84,18 @@ export const NewPostModalContainer = ({ id }: Props) => {
 
   return (
     <Modal aria-labelledby={dialogId} id={id} ref={ref} closedby="any">
-      <NewPostModalPage
-        key={resetKey}
-        id={dialogId}
-        hasError={hasError}
-        isLoading={isLoading}
-        onResetError={handleResetError}
-        onSubmit={handleSubmit}
-      />
+      {hasOpened ? (
+        <Suspense fallback={null}>
+          <LazyNewPostModalPage
+            key={resetKey}
+            id={dialogId}
+            hasError={hasError}
+            isLoading={isLoading}
+            onResetError={handleResetError}
+            onSubmit={handleSubmit}
+          />
+        </Suspense>
+      ) : null}
     </Modal>
   );
 };
diff --git a/application/client/src/containers/PostContainer.tsx b/application/client/src/containers/PostContainer.tsx
index c296554ead..2182c24729 100644
--- a/application/client/src/containers/PostContainer.tsx
+++ b/application/client/src/containers/PostContainer.tsx
@@ -14,7 +14,7 @@ const PostContainerContent = ({ postId }: { postId: string | undefined }) => {
     fetchJSON,
   );
 
-  const { data: comments, fetchMore } = useInfiniteFetch<Models.Comment>(
+  const { data: comments, fetchMore, hasMore } = useInfiniteFetch<Models.Comment>(
     `/api/v1/posts/${postId}/comments`,
     fetchJSON,
   );
@@ -32,7 +32,7 @@ const PostContainerContent = ({ postId }: { postId: string | undefined }) => {
   }
 
   return (
-    <InfiniteScroll fetchMore={fetchMore} items={comments}>
+    <InfiniteScroll fetchMore={fetchMore} hasMore={hasMore} items={comments}>
       <Helmet>
         <title>{post.user.name} さんのつぶやき - CaX</title>
       </Helmet>
diff --git a/application/client/src/containers/SearchContainer.tsx b/application/client/src/containers/SearchContainer.tsx
index f5cdd4148f..f572f7da67 100644
--- a/application/client/src/containers/SearchContainer.tsx
+++ b/application/client/src/containers/SearchContainer.tsx
@@ -10,13 +10,13 @@ export const SearchContainer = () => {
   const [searchParams] = useSearchParams();
   const query = searchParams.get("q") || "";
 
-  const { data: posts, fetchMore } = useInfiniteFetch<Models.Post>(
+  const { data: posts, fetchMore, hasMore } = useInfiniteFetch<Models.Post>(
     query ? `/api/v1/search?q=${encodeURIComponent(query)}` : "",
     fetchJSON,
   );
 
   return (
-    <InfiniteScroll fetchMore={fetchMore} items={posts}>
+    <InfiniteScroll fetchMore={fetchMore} hasMore={hasMore} items={posts}>
       <Helmet>
         <title>検索 - CaX</title>
       </Helmet>
diff --git a/application/client/src/containers/TimelineContainer.tsx b/application/client/src/containers/TimelineContainer.tsx
index 3b0ca03356..55cd4099a8 100644
--- a/application/client/src/containers/TimelineContainer.tsx
+++ b/application/client/src/containers/TimelineContainer.tsx
@@ -6,10 +6,13 @@ import { useInfiniteFetch } from "@web-speed-hackathon-2026/client/src/hooks/use
 import { fetchJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
 export const TimelineContainer = () => {
-  const { data: posts, fetchMore } = useInfiniteFetch<Models.Post>("/api/v1/posts", fetchJSON);
+  const { data: posts, fetchMore, hasMore } = useInfiniteFetch<Models.Post>(
+    "/api/v1/posts",
+    fetchJSON,
+  );
 
   return (
-    <InfiniteScroll fetchMore={fetchMore} items={posts}>
+    <InfiniteScroll fetchMore={fetchMore} hasMore={hasMore} items={posts}>
       <Helmet>
         <title>タイムライン - CaX</title>
       </Helmet>
diff --git a/application/client/src/containers/UserProfileContainer.tsx b/application/client/src/containers/UserProfileContainer.tsx
index dae135e89c..3d44432e46 100644
--- a/application/client/src/containers/UserProfileContainer.tsx
+++ b/application/client/src/containers/UserProfileContainer.tsx
@@ -15,7 +15,7 @@ export const UserProfileContainer = () => {
     `/api/v1/users/${username}`,
     fetchJSON,
   );
-  const { data: posts, fetchMore } = useInfiniteFetch<Models.Post>(
+  const { data: posts, fetchMore, hasMore } = useInfiniteFetch<Models.Post>(
     `/api/v1/users/${username}/posts`,
     fetchJSON,
   );
@@ -33,7 +33,7 @@ export const UserProfileContainer = () => {
   }
 
   return (
-    <InfiniteScroll fetchMore={fetchMore} items={posts}>
+    <InfiniteScroll fetchMore={fetchMore} hasMore={hasMore} items={posts}>
       <Helmet>
         <title>{user.name} さんのタイムライン - CaX</title>
       </Helmet>
diff --git a/application/client/src/hooks/use_infinite_fetch.ts b/application/client/src/hooks/use_infinite_fetch.ts
index 394fccd9ea..2b42ddc078 100644
--- a/application/client/src/hooks/use_infinite_fetch.ts
+++ b/application/client/src/hooks/use_infinite_fetch.ts
@@ -5,6 +5,7 @@ const LIMIT = 30;
 interface ReturnValues<T> {
   data: Array<T>;
   error: Error | null;
+  hasMore: boolean;
   isLoading: boolean;
   fetchMore: () => void;
 }
@@ -13,17 +14,18 @@ export function useInfiniteFetch<T>(
   apiPath: string,
   fetcher: (apiPath: string) => Promise<T[]>,
 ): ReturnValues<T> {
-  const internalRef = useRef({ isLoading: false, offset: 0 });
+  const internalRef = useRef({ hasMore: true, isLoading: false, offset: 0 });
 
   const [result, setResult] = useState<Omit<ReturnValues<T>, "fetchMore">>({
     data: [],
     error: null,
+    hasMore: true,
     isLoading: true,
   });
 
   const fetchMore = useCallback(() => {
-    const { isLoading, offset } = internalRef.current;
-    if (isLoading) {
+    const { hasMore, isLoading, offset } = internalRef.current;
+    if (!apiPath || isLoading || !hasMore) {
       return;
     }
 
@@ -32,20 +34,28 @@ export function useInfiniteFetch<T>(
       isLoading: true,
     }));
     internalRef.current = {
+      hasMore,
       isLoading: true,
       offset,
     };
 
-    void fetcher(apiPath).then(
-      (allData) => {
+    const requestUrl = new URL(apiPath, window.location.origin);
+    requestUrl.searchParams.set("limit", String(LIMIT));
+    requestUrl.searchParams.set("offset", String(offset));
+
+    void fetcher(`${requestUrl.pathname}${requestUrl.search}`).then(
+      (pageData) => {
+        const nextHasMore = pageData.length === LIMIT;
         setResult((cur) => ({
           ...cur,
-          data: [...cur.data, ...allData.slice(offset, offset + LIMIT)],
+          data: [...cur.data, ...pageData],
+          hasMore: nextHasMore,
           isLoading: false,
         }));
         internalRef.current = {
+          hasMore: nextHasMore,
           isLoading: false,
-          offset: offset + LIMIT,
+          offset: offset + pageData.length,
         };
       },
       (error) => {
@@ -55,6 +65,7 @@ export function useInfiniteFetch<T>(
           isLoading: false,
         }));
         internalRef.current = {
+          hasMore,
           isLoading: false,
           offset,
         };
@@ -63,12 +74,29 @@ export function useInfiniteFetch<T>(
   }, [apiPath, fetcher]);
 
   useEffect(() => {
+    if (!apiPath) {
+      setResult(() => ({
+        data: [],
+        error: null,
+        hasMore: false,
+        isLoading: false,
+      }));
+      internalRef.current = {
+        hasMore: false,
+        isLoading: false,
+        offset: 0,
+      };
+      return;
+    }
+
     setResult(() => ({
       data: [],
       error: null,
+      hasMore: true,
       isLoading: true,
     }));
     internalRef.current = {
+      hasMore: true,
       isLoading: false,
       offset: 0,
     };
diff --git a/application/client/src/hooks/use_ws.ts b/application/client/src/hooks/use_ws.ts
index a7a9800ddc..453ba88056 100644
--- a/application/client/src/hooks/use_ws.ts
+++ b/application/client/src/hooks/use_ws.ts
@@ -1,17 +1,34 @@
 import { useEffect, useEffectEvent } from "react";
 
-export function useWs<T>(url: string, onMessage: (event: T) => void) {
+interface Options {
+  delayMs?: number;
+  enabled?: boolean;
+}
+
+export function useWs<T>(
+  url: string,
+  onMessage: (event: T) => void,
+  { delayMs = 0, enabled = true }: Options = {},
+) {
   const handleMessage = useEffectEvent((event: MessageEvent) => {
     onMessage(JSON.parse(event.data));
   });
 
   useEffect(() => {
-    const ws = new WebSocket(url);
-    ws.addEventListener("message", handleMessage);
+    if (!enabled) {
+      return;
+    }
+
+    let ws: WebSocket | null = null;
+    const timerId = window.setTimeout(() => {
+      ws = new WebSocket(url);
+      ws.addEventListener("message", handleMessage);
+    }, delayMs);
 
     return () => {
-      ws.removeEventListener("message", handleMessage);
-      ws.close();
+      window.clearTimeout(timerId);
+      ws?.removeEventListener("message", handleMessage);
+      ws?.close();
     };
-  }, [url]);
+  }, [delayMs, enabled, url]);
 }
diff --git a/application/client/src/index.html b/application/client/src/index.html
index 3d949e7473..74b6206a16 100644
--- a/application/client/src/index.html
+++ b/application/client/src/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CaX</title>
-    <script src="/scripts/main.js"></script>
+    <script defer src="/scripts/main.js"></script>
     <link rel="stylesheet" href="/styles/main.css" />
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script>
     <style type="text/tailwindcss">
diff --git a/application/client/src/index.tsx b/application/client/src/index.tsx
index b1833b0af3..70e05a460f 100644
--- a/application/client/src/index.tsx
+++ b/application/client/src/index.tsx
@@ -5,12 +5,14 @@ import { BrowserRouter } from "react-router";
 import { AppContainer } from "@web-speed-hackathon-2026/client/src/containers/AppContainer";
 import { store } from "@web-speed-hackathon-2026/client/src/store";
 
-window.addEventListener("load", () => {
-  createRoot(document.getElementById("app")!).render(
+const appNode = document.getElementById("app");
+
+if (appNode != null) {
+  createRoot(appNode).render(
     <Provider store={store}>
       <BrowserRouter>
         <AppContainer />
       </BrowserRouter>
     </Provider>,
   );
-});
+}
diff --git a/application/client/src/utils/fetchers.ts b/application/client/src/utils/fetchers.ts
index 92a14f408f..4803af6a5a 100644
--- a/application/client/src/utils/fetchers.ts
+++ b/application/client/src/utils/fetchers.ts
@@ -1,40 +1,95 @@
-import $ from "jquery";
 import { gzip } from "pako";
 
+type ResponseJSON = Record<string, unknown> | null;
+
+export class HTTPError extends Error {
+  responseJSON: ResponseJSON;
+  status: number;
+
+  constructor({
+    message,
+    responseJSON,
+    status,
+  }: {
+    message: string;
+    responseJSON: ResponseJSON;
+    status: number;
+  }) {
+    super(message);
+    this.name = "HTTPError";
+    this.responseJSON = responseJSON;
+    this.status = status;
+  }
+}
+
+async function parseJSONResponse<T>(response: Response): Promise<T> {
+  const text = await response.text();
+  if (text === "") {
+    return null as T;
+  }
+  return JSON.parse(text) as T;
+}
+
+async function parseErrorResponse(response: Response): Promise<never> {
+  let responseJSON: ResponseJSON = null;
+
+  try {
+    responseJSON = await parseJSONResponse<ResponseJSON>(response);
+  } catch {
+    responseJSON = null;
+  }
+
+  throw new HTTPError({
+    message:
+      typeof responseJSON?.["message"] === "string"
+        ? responseJSON["message"]
+        : response.statusText,
+    responseJSON,
+    status: response.status,
+  });
+}
+
 export async function fetchBinary(url: string): Promise<ArrayBuffer> {
-  const result = await $.ajax({
-    async: false,
-    dataType: "binary",
+  const response = await fetch(url, {
+    credentials: "same-origin",
     method: "GET",
-    responseType: "arraybuffer",
-    url,
   });
-  return result;
+
+  if (!response.ok) {
+    return parseErrorResponse(response);
+  }
+
+  return response.arrayBuffer();
 }
 
 export async function fetchJSON<T>(url: string): Promise<T> {
-  const result = await $.ajax({
-    async: false,
-    dataType: "json",
+  const response = await fetch(url, {
+    credentials: "same-origin",
     method: "GET",
-    url,
   });
-  return result;
+
+  if (!response.ok) {
+    return parseErrorResponse(response);
+  }
+
+  return parseJSONResponse<T>(response);
 }
 
 export async function sendFile<T>(url: string, file: File): Promise<T> {
-  const result = await $.ajax({
-    async: false,
-    data: file,
-    dataType: "json",
+  const response = await fetch(url, {
+    body: file,
+    credentials: "same-origin",
     headers: {
       "Content-Type": "application/octet-stream",
     },
     method: "POST",
-    processData: false,
-    url,
   });
-  return result;
+
+  if (!response.ok) {
+    return parseErrorResponse(response);
+  }
+
+  return parseJSONResponse<T>(response);
 }
 
 export async function sendJSON<T>(url: string, data: object): Promise<T> {
@@ -42,17 +97,19 @@ export async function sendJSON<T>(url: string, data: object): Promise<T> {
   const uint8Array = new TextEncoder().encode(jsonString);
   const compressed = gzip(uint8Array);
 
-  const result = await $.ajax({
-    async: false,
-    data: compressed,
-    dataType: "json",
+  const response = await fetch(url, {
+    body: compressed,
+    credentials: "same-origin",
     headers: {
       "Content-Encoding": "gzip",
       "Content-Type": "application/json",
     },
     method: "POST",
-    processData: false,
-    url,
   });
-  return result;
+
+  if (!response.ok) {
+    return parseErrorResponse(response);
+  }
+
+  return parseJSONResponse<T>(response);
 }
diff --git a/application/client/webpack.config.js b/application/client/webpack.config.js
index 9fae72647f..71d4adc475 100644
--- a/application/client/webpack.config.js
+++ b/application/client/webpack.config.js
@@ -10,6 +10,7 @@ const SRC_PATH = path.resolve(__dirname, "./src");
 const PUBLIC_PATH = path.resolve(__dirname, "../public");
 const UPLOAD_PATH = path.resolve(__dirname, "../upload");
 const DIST_PATH = path.resolve(__dirname, "../dist");
+const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import('webpack').Configuration} */
 const config = {
@@ -25,18 +26,17 @@ const config = {
     ],
     static: [PUBLIC_PATH, UPLOAD_PATH],
   },
-  devtool: "inline-source-map",
+  devtool: isProduction ? false : "inline-source-map",
   entry: {
     main: [
       "core-js",
       "regenerator-runtime/runtime",
-      "jquery-binarytransport",
       path.resolve(SRC_PATH, "./index.css"),
       path.resolve(SRC_PATH, "./buildinfo.ts"),
       path.resolve(SRC_PATH, "./index.tsx"),
     ],
   },
-  mode: "none",
+  mode: isProduction ? "production" : "development",
   module: {
     rules: [
       {
@@ -60,7 +60,6 @@ const config = {
   },
   output: {
     chunkFilename: "scripts/chunk-[contenthash].js",
-    chunkFormat: false,
     filename: "scripts/[name].js",
     path: DIST_PATH,
     publicPath: "auto",
@@ -68,10 +67,8 @@ const config = {
   },
   plugins: [
     new webpack.ProvidePlugin({
-      $: "jquery",
       AudioContext: ["standardized-audio-context", "AudioContext"],
       Buffer: ["buffer", "Buffer"],
-      "window.jQuery": "jquery",
     }),
     new webpack.EnvironmentPlugin({
       BUILD_DATE: new Date().toISOString(),
@@ -127,15 +124,17 @@ const config = {
       url: false,
     },
   },
-  optimization: {
-    minimize: false,
-    splitChunks: false,
-    concatenateModules: false,
-    usedExports: false,
-    providedExports: false,
-    sideEffects: false,
-  },
-  cache: false,
+  optimization: isProduction
+    ? undefined
+    : {
+        minimize: false,
+        splitChunks: false,
+        concatenateModules: false,
+        usedExports: false,
+        providedExports: false,
+        sideEffects: false,
+      },
+  cache: isProduction ? { type: "filesystem" } : false,
   ignoreWarnings: [
     {
       module: /@ffmpeg/,

From 7af28d1e4171be734780ad66626d270b60693445 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 01:36:49 +0900
Subject: [PATCH 02/21] Reduce client work and fix search flow

---
 application/client/babel.config.js            |   3 +-
 application/client/package.json               |   2 +
 application/client/postcss.config.js          |   2 +
 .../src/components/application/SearchPage.tsx |  36 +-
 .../direct_message/DirectMessageListPage.tsx  |  10 +-
 .../direct_message/DirectMessagePage.tsx      |   6 +-
 .../components/foundation/AspectRatioBox.tsx  |  28 +-
 .../components/foundation/CoveredImage.tsx    |  67 ++--
 .../src/components/post/CommentItem.tsx       |  15 +-
 .../client/src/components/post/ImageArea.tsx  |   2 +-
 .../client/src/components/post/PostItem.tsx   |  10 +-
 .../src/components/timeline/TimelineItem.tsx  |  15 +-
 .../user_profile/UserProfileHeader.tsx        |   9 +-
 .../src/containers/AuthModalContainer.tsx     |  24 +-
 .../client/src/hooks/use_infinite_fetch.ts    |   2 +-
 application/client/src/index.css              | 188 ++++++++++
 application/client/src/index.html             | 166 ---------
 application/client/src/search/services.ts     |  88 +++--
 application/client/src/search/validation.ts   |  10 +-
 application/client/src/utils/date_format.ts   |  49 +++
 application/client/webpack.config.js          |   2 -
 application/pnpm-lock.yaml                    | 325 +++++++++++++++++-
 application/server/src/routes/api/search.ts   |   1 +
 23 files changed, 733 insertions(+), 327 deletions(-)
 create mode 100644 application/client/src/utils/date_format.ts

diff --git a/application/client/babel.config.js b/application/client/babel.config.js
index c74320dd37..6a0079da4e 100644
--- a/application/client/babel.config.js
+++ b/application/client/babel.config.js
@@ -4,8 +4,7 @@ module.exports = {
     [
       "@babel/preset-env",
       {
-        targets: "ie 11",
-        corejs: "3",
+        targets: "last 1 Chrome version",
         modules: false,
         useBuiltIns: false,
       },
diff --git a/application/client/package.json b/application/client/package.json
index af2d3a5156..a899353261 100644
--- a/application/client/package.json
+++ b/application/client/package.json
@@ -57,6 +57,7 @@
     "@babel/preset-env": "7.28.3",
     "@babel/preset-react": "7.27.1",
     "@babel/preset-typescript": "7.27.1",
+    "@tailwindcss/postcss": "4.2.2",
     "@tsconfig/strictest": "2.0.8",
     "@types/bluebird": "3.5.42",
     "@types/common-tags": "1.8.4",
@@ -83,6 +84,7 @@
     "postcss-loader": "8.2.0",
     "postcss-preset-env": "10.4.0",
     "react-markdown": "10.1.0",
+    "tailwindcss": "4.2.2",
     "typescript": "5.9.3",
     "webpack": "5.102.1",
     "webpack-cli": "6.0.1",
diff --git a/application/client/postcss.config.js b/application/client/postcss.config.js
index d7ee920b94..bcb66acf3f 100644
--- a/application/client/postcss.config.js
+++ b/application/client/postcss.config.js
@@ -1,9 +1,11 @@
+const tailwindcss = require("@tailwindcss/postcss");
 const postcssImport = require("postcss-import");
 const postcssPresetEnv = require("postcss-preset-env");
 
 module.exports = {
   plugins: [
     postcssImport(),
+    tailwindcss(),
     postcssPresetEnv({
       stage: 3,
     }),
diff --git a/application/client/src/components/application/SearchPage.tsx b/application/client/src/components/application/SearchPage.tsx
index 519c919f1a..9d86945521 100644
--- a/application/client/src/components/application/SearchPage.tsx
+++ b/application/client/src/components/application/SearchPage.tsx
@@ -21,6 +21,7 @@ const SearchInput = ({ input, meta }: WrappedFieldProps) => (
   <div className="flex flex-1 flex-col">
     <input
       {...input}
+      aria-label="検索 (例: キーワード since:2025-01-01 until:2025-12-31)"
       className={`flex-1 rounded border px-4 py-2 focus:outline-none ${
         meta.touched && meta.error
           ? "border-cax-danger focus:border-cax-danger"
@@ -52,21 +53,32 @@ const SearchPageComponent = ({
     }
 
     let isMounted = true;
-    void import("@web-speed-hackathon-2026/client/src/utils/negaposi_analyzer")
-      .then(({ analyzeSentiment }) => analyzeSentiment(parsed.keywords))
-      .then((result) => {
-        if (isMounted) {
-          setIsNegative(result.label === "negative");
-        }
-      })
-      .catch(() => {
-        if (isMounted) {
-          setIsNegative(false);
-        }
-      });
+    const run = () => {
+      void import("@web-speed-hackathon-2026/client/src/utils/negaposi_analyzer")
+        .then(({ analyzeSentiment }) => analyzeSentiment(parsed.keywords))
+        .then((result) => {
+          if (isMounted) {
+            setIsNegative(result.label === "negative");
+          }
+        })
+        .catch(() => {
+          if (isMounted) {
+            setIsNegative(false);
+          }
+        });
+    };
+
+    const timerId = window.setTimeout(() => {
+      if ("requestIdleCallback" in window) {
+        window.requestIdleCallback(run, { timeout: 5000 });
+      } else {
+        run();
+      }
+    }, 2000);
 
     return () => {
       isMounted = false;
+      window.clearTimeout(timerId);
     };
   }, [parsed.keywords]);
 
diff --git a/application/client/src/components/direct_message/DirectMessageListPage.tsx b/application/client/src/components/direct_message/DirectMessageListPage.tsx
index fa671f2fb1..f35e9e160f 100644
--- a/application/client/src/components/direct_message/DirectMessageListPage.tsx
+++ b/application/client/src/components/direct_message/DirectMessageListPage.tsx
@@ -1,10 +1,10 @@
-import moment from "moment";
 import { useCallback, useEffect, useState } from "react";
 
 import { Button } from "@web-speed-hackathon-2026/client/src/components/foundation/Button";
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { Link } from "@web-speed-hackathon-2026/client/src/components/foundation/Link";
 import { useWs } from "@web-speed-hackathon-2026/client/src/hooks/use_ws";
+import { formatRelativeFromNowJa } from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { fetchJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
@@ -85,7 +85,11 @@ export const DirectMessageListPage = ({ activeUser, newDmModalId }: Props) => {
               .some((m) => !m.isRead);
 
             return (
-              <li className="grid" key={conversation.id}>
+              <li
+                className="grid"
+                key={conversation.id}
+                style={{ containIntrinsicSize: "120px", contentVisibility: "auto" }}
+              >
                 <Link className="hover:bg-cax-surface-subtle px-4" to={`/dm/${conversation.id}`}>
                   <div className="border-cax-border flex gap-4 border-b px-4 pt-2 pb-4">
                     <img
@@ -104,7 +108,7 @@ export const DirectMessageListPage = ({ activeUser, newDmModalId }: Props) => {
                             className="text-cax-text-subtle text-xs"
                             dateTime={lastMessage.createdAt}
                           >
-                            {moment(lastMessage.createdAt).locale("ja").fromNow()}
+                            {formatRelativeFromNowJa(lastMessage.createdAt)}
                           </time>
                         )}
                       </div>
diff --git a/application/client/src/components/direct_message/DirectMessagePage.tsx b/application/client/src/components/direct_message/DirectMessagePage.tsx
index 96f124d2e6..17ecb30035 100644
--- a/application/client/src/components/direct_message/DirectMessagePage.tsx
+++ b/application/client/src/components/direct_message/DirectMessagePage.tsx
@@ -1,5 +1,4 @@
 import classNames from "classnames";
-import moment from "moment";
 import {
   ChangeEvent,
   useCallback,
@@ -13,6 +12,7 @@ import {
 
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { DirectMessageFormData } from "@web-speed-hackathon-2026/client/src/direct_message/types";
+import { formatTimeJa } from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
 interface Props {
@@ -130,9 +130,7 @@ export const DirectMessagePage = ({
                   {message.body}
                 </p>
                 <div className="flex gap-1 text-xs">
-                  <time dateTime={message.createdAt}>
-                    {moment(message.createdAt).locale("ja").format("HH:mm")}
-                  </time>
+                  <time dateTime={message.createdAt}>{formatTimeJa(message.createdAt)}</time>
                   {isActiveUserSend && message.isRead && (
                     <span className="text-cax-text-muted">既読</span>
                   )}
diff --git a/application/client/src/components/foundation/AspectRatioBox.tsx b/application/client/src/components/foundation/AspectRatioBox.tsx
index 0ae891963c..df7c4d6635 100644
--- a/application/client/src/components/foundation/AspectRatioBox.tsx
+++ b/application/client/src/components/foundation/AspectRatioBox.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { ReactNode } from "react";
 
 interface Props {
   aspectHeight: number;
@@ -10,28 +10,12 @@ interface Props {
  * 親要素の横幅を基準にして、指定したアスペクト比のブロック要素を作ります
  */
 export const AspectRatioBox = ({ aspectHeight, aspectWidth, children }: Props) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [clientHeight, setClientHeight] = useState(0);
-
-  useEffect(() => {
-    // clientWidth とアスペクト比から clientHeight を計算する
-    function calcStyle() {
-      const clientWidth = ref.current?.clientWidth ?? 0;
-      setClientHeight((clientWidth / aspectWidth) * aspectHeight);
-    }
-    setTimeout(() => calcStyle(), 500);
-
-    // ウィンドウサイズが変わるたびに計算する
-    window.addEventListener("resize", calcStyle, { passive: false });
-    return () => {
-      window.removeEventListener("resize", calcStyle);
-    };
-  }, [aspectHeight, aspectWidth]);
-
   return (
-    <div ref={ref} className="relative h-1 w-full" style={{ height: clientHeight }}>
-      {/* 高さが計算できるまで render しない */}
-      {clientHeight !== 0 ? <div className="absolute inset-0">{children}</div> : null}
+    <div
+      className="relative h-auto w-full overflow-hidden"
+      style={{ aspectRatio: `${aspectWidth} / ${aspectHeight}` }}
+    >
+      <div className="absolute inset-0">{children}</div>
     </div>
   );
 };
diff --git a/application/client/src/components/foundation/CoveredImage.tsx b/application/client/src/components/foundation/CoveredImage.tsx
index 8ad9cc1f7d..ee46e0e47b 100644
--- a/application/client/src/components/foundation/CoveredImage.tsx
+++ b/application/client/src/components/foundation/CoveredImage.tsx
@@ -1,70 +1,50 @@
-import classNames from "classnames";
-import sizeOf from "image-size";
 import { load, ImageIFD } from "piexifjs";
-import { MouseEvent, RefCallback, useCallback, useId, useMemo, useState } from "react";
+import { MouseEvent, useCallback, useId, useState } from "react";
 
 import { Button } from "@web-speed-hackathon-2026/client/src/components/foundation/Button";
 import { Modal } from "@web-speed-hackathon-2026/client/src/components/modal/Modal";
-import { useFetch } from "@web-speed-hackathon-2026/client/src/hooks/use_fetch";
 import { fetchBinary } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
 interface Props {
+  alt?: string;
   src: string;
 }
 
 /**
  * アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように画像を拡大縮小します
  */
-export const CoveredImage = ({ src }: Props) => {
+export const CoveredImage = ({ alt = "", src }: Props) => {
   const dialogId = useId();
   // ダイアログの背景をクリックしたときに投稿詳細ページに遷移しないようにする
   const handleDialogClick = useCallback((ev: MouseEvent<HTMLDialogElement>) => {
     ev.stopPropagation();
   }, []);
 
-  const { data, isLoading } = useFetch(src, fetchBinary);
+  const [description, setDescription] = useState(alt);
 
-  const imageSize = useMemo(() => {
-    return data != null ? sizeOf(Buffer.from(data)) : { height: 0, width: 0 };
-  }, [data]);
+  const handleOpenDescription = useCallback(() => {
+    if (description !== "") {
+      return;
+    }
 
-  const alt = useMemo(() => {
-    const exif = data != null ? load(Buffer.from(data).toString("binary")) : null;
-    const raw = exif?.["0th"]?.[ImageIFD.ImageDescription];
-    return raw != null ? new TextDecoder().decode(Buffer.from(raw, "binary")) : "";
-  }, [data]);
-
-  const blobUrl = useMemo(() => {
-    return data != null ? URL.createObjectURL(new Blob([data])) : null;
-  }, [data]);
-
-  const [containerSize, setContainerSize] = useState({ height: 0, width: 0 });
-  const callbackRef = useCallback<RefCallback<HTMLDivElement>>((el) => {
-    setContainerSize({
-      height: el?.clientHeight ?? 0,
-      width: el?.clientWidth ?? 0,
-    });
-  }, []);
-
-  if (isLoading || data === null || blobUrl === null) {
-    return null;
-  }
-
-  const containerRatio = containerSize.height / containerSize.width;
-  const imageRatio = imageSize?.height / imageSize?.width;
+    void fetchBinary(src)
+      .then((data) => {
+        const exif = load(Buffer.from(data).toString("binary"));
+        const raw = exif?.["0th"]?.[ImageIFD.ImageDescription];
+        if (raw != null) {
+          setDescription(new TextDecoder().decode(Buffer.from(raw, "binary")));
+        }
+      })
+      .catch(() => {});
+  }, [description, src]);
 
   return (
-    <div ref={callbackRef} className="relative h-full w-full overflow-hidden">
+    <div className="relative h-full w-full overflow-hidden">
       <img
         alt={alt}
-        className={classNames(
-          "absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2",
-          {
-            "w-auto h-full": containerRatio > imageRatio,
-            "w-full h-auto": containerRatio <= imageRatio,
-          },
-        )}
-        src={blobUrl}
+        className="h-full w-full object-cover"
+        decoding="async"
+        src={src}
       />
 
       <button
@@ -72,6 +52,7 @@ export const CoveredImage = ({ src }: Props) => {
         type="button"
         command="show-modal"
         commandfor={dialogId}
+        onClick={handleOpenDescription}
       >
         ALT を表示する
       </button>
@@ -80,7 +61,7 @@ export const CoveredImage = ({ src }: Props) => {
         <div className="grid gap-y-6">
           <h1 className="text-center text-2xl font-bold">画像の説明</h1>
 
-          <p className="text-sm">{alt}</p>
+          <p className="text-sm">{description}</p>
 
           <Button variant="secondary" command="close" commandfor={dialogId}>
             閉じる
diff --git a/application/client/src/components/post/CommentItem.tsx b/application/client/src/components/post/CommentItem.tsx
index cb5bd38bda..33a2588320 100644
--- a/application/client/src/components/post/CommentItem.tsx
+++ b/application/client/src/components/post/CommentItem.tsx
@@ -1,7 +1,9 @@
-import moment from "moment";
-
 import { Link } from "@web-speed-hackathon-2026/client/src/components/foundation/Link";
 import { TranslatableText } from "@web-speed-hackathon-2026/client/src/components/post/TranslatableText";
+import {
+  formatLongDateJa,
+  toISOString,
+} from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
 interface Props {
@@ -10,7 +12,10 @@ interface Props {
 
 export const CommentItem = ({ comment }: Props) => {
   return (
-    <article className="hover:bg-cax-surface-subtle px-1 sm:px-4">
+    <article
+      className="hover:bg-cax-surface-subtle px-1 sm:px-4"
+      style={{ containIntrinsicSize: "220px", contentVisibility: "auto" }}
+    >
       <div className="border-cax-border flex border-b px-2 pt-2 pb-4 sm:px-4">
         <div className="shrink-0 grow-0 pr-2 sm:pr-4">
           <Link
@@ -42,9 +47,7 @@ export const CommentItem = ({ comment }: Props) => {
             <TranslatableText text={comment.text} />
           </div>
           <p className="text-cax-text-muted pt-1 text-xs">
-            <time dateTime={moment(comment.createdAt).toISOString()}>
-              {moment(comment.createdAt).locale("ja").format("LL")}
-            </time>
+            <time dateTime={toISOString(comment.createdAt)}>{formatLongDateJa(comment.createdAt)}</time>
           </p>
         </div>
       </div>
diff --git a/application/client/src/components/post/ImageArea.tsx b/application/client/src/components/post/ImageArea.tsx
index 27fe9c018c..918003c6f3 100644
--- a/application/client/src/components/post/ImageArea.tsx
+++ b/application/client/src/components/post/ImageArea.tsx
@@ -24,7 +24,7 @@ export const ImageArea = ({ images }: Props) => {
                 "row-span-2": images.length <= 2 || (images.length === 3 && idx === 0),
               })}
             >
-              <CoveredImage src={getImagePath(image.id)} />
+              <CoveredImage alt={image.alt} src={getImagePath(image.id)} />
             </div>
           );
         })}
diff --git a/application/client/src/components/post/PostItem.tsx b/application/client/src/components/post/PostItem.tsx
index 5fa904c91a..431ccae761 100644
--- a/application/client/src/components/post/PostItem.tsx
+++ b/application/client/src/components/post/PostItem.tsx
@@ -1,10 +1,12 @@
-import moment from "moment";
-
 import { Link } from "@web-speed-hackathon-2026/client/src/components/foundation/Link";
 import { ImageArea } from "@web-speed-hackathon-2026/client/src/components/post/ImageArea";
 import { MovieArea } from "@web-speed-hackathon-2026/client/src/components/post/MovieArea";
 import { SoundArea } from "@web-speed-hackathon-2026/client/src/components/post/SoundArea";
 import { TranslatableText } from "@web-speed-hackathon-2026/client/src/components/post/TranslatableText";
+import {
+  formatLongDateJa,
+  toISOString,
+} from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
 interface Props {
@@ -67,9 +69,7 @@ export const PostItem = ({ post }: Props) => {
           ) : null}
           <p className="mt-2 text-sm sm:mt-4">
             <Link className="text-cax-text-muted hover:underline" to={`/posts/${post.id}`}>
-              <time dateTime={moment(post.createdAt).toISOString()}>
-                {moment(post.createdAt).locale("ja").format("LL")}
-              </time>
+              <time dateTime={toISOString(post.createdAt)}>{formatLongDateJa(post.createdAt)}</time>
             </Link>
           </p>
         </div>
diff --git a/application/client/src/components/timeline/TimelineItem.tsx b/application/client/src/components/timeline/TimelineItem.tsx
index 21b88980f8..0340e0c1ba 100644
--- a/application/client/src/components/timeline/TimelineItem.tsx
+++ b/application/client/src/components/timeline/TimelineItem.tsx
@@ -1,4 +1,3 @@
-import moment from "moment";
 import { MouseEventHandler, useCallback } from "react";
 import { Link, useNavigate } from "react-router";
 
@@ -6,6 +5,10 @@ import { ImageArea } from "@web-speed-hackathon-2026/client/src/components/post/
 import { MovieArea } from "@web-speed-hackathon-2026/client/src/components/post/MovieArea";
 import { SoundArea } from "@web-speed-hackathon-2026/client/src/components/post/SoundArea";
 import { TranslatableText } from "@web-speed-hackathon-2026/client/src/components/post/TranslatableText";
+import {
+  formatLongDateJa,
+  toISOString,
+} from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
 const isClickedAnchorOrButton = (target: EventTarget | null, currentTarget: Element): boolean => {
@@ -47,7 +50,11 @@ export const TimelineItem = ({ post }: Props) => {
   );
 
   return (
-    <article className="hover:bg-cax-surface-subtle px-1 sm:px-4" onClick={handleClick}>
+    <article
+      className="hover:bg-cax-surface-subtle px-1 sm:px-4"
+      onClick={handleClick}
+      style={{ containIntrinsicSize: "420px", contentVisibility: "auto" }}
+    >
       <div className="border-cax-border flex border-b px-2 pt-2 pb-4 sm:px-4">
         <div className="shrink-0 grow-0 pr-2 sm:pr-4">
           <Link
@@ -76,9 +83,7 @@ export const TimelineItem = ({ post }: Props) => {
             </Link>
             <span className="text-cax-text-muted pr-1">-</span>
             <Link className="text-cax-text-muted pr-1 hover:underline" to={`/posts/${post.id}`}>
-              <time dateTime={moment(post.createdAt).toISOString()}>
-                {moment(post.createdAt).locale("ja").format("LL")}
-              </time>
+              <time dateTime={toISOString(post.createdAt)}>{formatLongDateJa(post.createdAt)}</time>
             </Link>
           </p>
           <div className="text-cax-text leading-relaxed">
diff --git a/application/client/src/components/user_profile/UserProfileHeader.tsx b/application/client/src/components/user_profile/UserProfileHeader.tsx
index c1c3355e19..a2b5ca8d50 100644
--- a/application/client/src/components/user_profile/UserProfileHeader.tsx
+++ b/application/client/src/components/user_profile/UserProfileHeader.tsx
@@ -1,8 +1,11 @@
 import { FastAverageColor } from "fast-average-color";
-import moment from "moment";
 import { ReactEventHandler, useCallback, useState } from "react";
 
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
+import {
+  formatLongDateJa,
+  toISOString,
+} from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
 interface Props {
@@ -43,9 +46,7 @@ export const UserProfileHeader = ({ user }: Props) => {
             <FontAwesomeIcon iconType="calendar-alt" styleType="regular" />
           </span>
           <span>
-            <time dateTime={moment(user.createdAt).toISOString()}>
-              {moment(user.createdAt).locale("ja").format("LL")}
-            </time>
+            <time dateTime={toISOString(user.createdAt)}>{formatLongDateJa(user.createdAt)}</time>
             からサービスを利用しています
           </span>
         </p>
diff --git a/application/client/src/containers/AuthModalContainer.tsx b/application/client/src/containers/AuthModalContainer.tsx
index 33e237ada8..9f4cceeb8b 100644
--- a/application/client/src/containers/AuthModalContainer.tsx
+++ b/application/client/src/containers/AuthModalContainer.tsx
@@ -1,15 +1,11 @@
-import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { SubmissionError } from "redux-form";
 
 import { AuthFormData } from "@web-speed-hackathon-2026/client/src/auth/types";
+import { AuthModalPage } from "@web-speed-hackathon-2026/client/src/components/auth_modal/AuthModalPage";
 import { Modal } from "@web-speed-hackathon-2026/client/src/components/modal/Modal";
 import { HTTPError, sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
-const LazyAuthModalPage = lazy(async () => {
-  const module = await import("@web-speed-hackathon-2026/client/src/components/auth_modal/AuthModalPage");
-  return { default: module.AuthModalPage };
-});
-
 interface Props {
   id: string;
   onUpdateActiveUser: (user: Models.User) => void;
@@ -41,7 +37,6 @@ function getErrorCode(err: unknown, type: "signin" | "signup"): string {
 
 export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
   const ref = useRef<HTMLDialogElement>(null);
-  const [hasOpened, setHasOpened] = useState(false);
   const [resetKey, setResetKey] = useState(0);
   useEffect(() => {
     if (!ref.current) return;
@@ -50,7 +45,6 @@ export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
     const handleToggle = () => {
       // モーダル開閉時にkeyを更新することでフォームの状態をリセットする
       setResetKey((key) => key + 1);
-      setHasOpened((current) => current || element.open);
     };
     element.addEventListener("toggle", handleToggle);
     return () => {
@@ -85,15 +79,11 @@ export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
 
   return (
     <Modal id={id} ref={ref} closedby="any">
-      {hasOpened ? (
-        <Suspense fallback={null}>
-          <LazyAuthModalPage
-            key={resetKey}
-            onRequestCloseModal={handleRequestCloseModal}
-            onSubmit={handleSubmit}
-          />
-        </Suspense>
-      ) : null}
+      <AuthModalPage
+        key={resetKey}
+        onRequestCloseModal={handleRequestCloseModal}
+        onSubmit={handleSubmit}
+      />
     </Modal>
   );
 };
diff --git a/application/client/src/hooks/use_infinite_fetch.ts b/application/client/src/hooks/use_infinite_fetch.ts
index 2b42ddc078..e7e4a8615b 100644
--- a/application/client/src/hooks/use_infinite_fetch.ts
+++ b/application/client/src/hooks/use_infinite_fetch.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
-const LIMIT = 30;
+const LIMIT = 12;
 
 interface ReturnValues<T> {
   data: Array<T>;
diff --git a/application/client/src/index.css b/application/client/src/index.css
index 8612ebcdd2..0d85ef194a 100644
--- a/application/client/src/index.css
+++ b/application/client/src/index.css
@@ -1,6 +1,8 @@
 @layer normalize, theme, base, components, utilities;
 
 @import "normalize.css" layer(normalize);
+@import "tailwindcss";
+@source "./**/*.{ts,tsx,html}";
 
 @font-face {
   /* Source Han Serif JP Regular の Y 軸を 1/1.43 に縮小した改変フォント */
@@ -23,3 +25,189 @@
   vertical-align: -0.125em;
   width: 1em;
 }
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+@theme {
+  --color-cax-canvas: var(--color-stone-100);
+  --color-cax-surface: var(--color-white);
+  --color-cax-surface-raised: var(--color-white);
+  --color-cax-surface-subtle: var(--color-stone-50);
+  --color-cax-overlay: var(--color-slate-950);
+  --color-cax-border: var(--color-stone-300);
+  --color-cax-border-strong: var(--color-stone-400);
+  --color-cax-text: var(--color-teal-950);
+  --color-cax-text-muted: var(--color-teal-700);
+  --color-cax-text-subtle: var(--color-slate-500);
+  --color-cax-brand: var(--color-teal-700);
+  --color-cax-brand-strong: var(--color-teal-800);
+  --color-cax-brand-soft: var(--color-teal-100);
+  --color-cax-accent: var(--color-orange-700);
+  --color-cax-accent-soft: var(--color-orange-100);
+  --color-cax-danger: var(--color-red-600);
+  --color-cax-danger-soft: var(--color-red-100);
+  --color-cax-highlight: var(--color-amber-200);
+  --color-cax-highlight-ink: var(--color-amber-950);
+}
+
+@utility markdown {
+  @apply text-sm wrap-anywhere;
+  line-break: strict;
+
+  :where(a) {
+    @apply text-cax-accent decoration-cax-accent underline underline-offset-2;
+  }
+
+  :where(strong) {
+    @apply font-bold;
+  }
+
+  :where(em) {
+    @apply italic;
+  }
+
+  :where(code):not(:where(pre > code)) {
+    @apply bg-cax-surface-subtle text-cax-text rounded px-1 py-0.5 font-mono;
+  }
+
+  :where(del) {
+    @apply decoration-cax-text-subtle line-through;
+  }
+
+  :where(p) {
+    @apply text-cax-text my-6;
+  }
+
+  :where(blockquote) {
+    @apply border-cax-border text-cax-text-muted my-6 border-l-4 pl-4;
+  }
+
+  :where(hr) {
+    @apply border-cax-border my-10 border-t;
+  }
+
+  :where(ol) {
+    @apply my-6 list-decimal pl-6;
+  }
+
+  :where(ul) {
+    @apply my-6 list-disc pl-6;
+  }
+
+  :where(li) {
+    @apply my-2;
+  }
+
+  :where(ol > li, ul > li)::marker {
+    @apply text-cax-text-muted;
+  }
+
+  :where(ol ol, ul ul, ol ul, ul ol) {
+    @apply my-2;
+  }
+
+  :where(table) {
+    @apply text-cax-text my-6 w-full table-auto text-sm;
+  }
+
+  :where(thead) {
+    @apply border-cax-border border-b;
+  }
+
+  :where(thead th) {
+    @apply px-2 pb-1.5 font-bold;
+  }
+
+  :where(tbody tr) {
+    @apply border-cax-border border-b;
+  }
+
+  :where(tbody tr:last-child) {
+    @apply border-b-0;
+  }
+
+  :where(tbody td) {
+    @apply align-baseline;
+  }
+
+  :where(tfoot) {
+    @apply border-cax-border border-t;
+  }
+
+  :where(tfoot td) {
+    @apply align-top;
+  }
+
+  :where(th, td) {
+    @apply text-left;
+  }
+
+  :where(tbody td, tfoot td) {
+    @apply px-2 py-1.5;
+  }
+
+  :where(tbody tr:last-child td, tfoot tr:last-child td) {
+    @apply pb-0;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    @apply text-cax-text text-pretty;
+  }
+
+  :where(h1, h2, h3, h4) {
+    @apply font-bold;
+  }
+
+  :where(h1, h2) {
+    @apply mt-10 mb-8 text-2xl;
+  }
+
+  :where(h3) {
+    @apply mt-8 mb-6 text-xl;
+  }
+
+  :where(h4) {
+    @apply mt-6 mb-4 text-lg;
+  }
+
+  :where(h5) {
+    @apply border-cax-border mt-6 mb-4 border-b py-0.5 pl-2 font-bold;
+  }
+
+  :where(h6) {
+    @apply border-cax-border mt-6 mb-4 border-b py-0.5 pl-2;
+  }
+
+  :where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+    @apply mt-0;
+  }
+
+  :where(.footnotes) {
+    @apply border-cax-border mt-8 border-t;
+  }
+
+  :where(.footnotes h2) {
+    @apply sr-only;
+  }
+
+  :where(.footnotes ol) {
+    @apply mt-8 mb-0 text-sm;
+  }
+
+  :where(.footnotes ol li p) {
+    @apply my-0;
+  }
+
+  & > *:first-child {
+    @apply mt-0;
+  }
+
+  & > *:last-child {
+    @apply mb-0;
+  }
+}
diff --git a/application/client/src/index.html b/application/client/src/index.html
index 74b6206a16..cd9c781883 100644
--- a/application/client/src/index.html
+++ b/application/client/src/index.html
@@ -6,172 +6,6 @@
     <title>CaX</title>
     <script defer src="/scripts/main.js"></script>
     <link rel="stylesheet" href="/styles/main.css" />
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script>
-    <style type="text/tailwindcss">
-      @layer base {
-        button:not(:disabled),
-        [role="button"]:not(:disabled) {
-          cursor: pointer;
-        }
-      }
-
-      @theme {
-        --color-cax-canvas: var(--color-stone-100);
-        --color-cax-surface: var(--color-white);
-        --color-cax-surface-raised: var(--color-white);
-        --color-cax-surface-subtle: var(--color-stone-50);
-        --color-cax-overlay: var(--color-slate-950);
-        --color-cax-border: var(--color-stone-300);
-        --color-cax-border-strong: var(--color-stone-400);
-        --color-cax-text: var(--color-teal-950);
-        --color-cax-text-muted: var(--color-teal-700);
-        --color-cax-text-subtle: var(--color-slate-500);
-        --color-cax-brand: var(--color-teal-700);
-        --color-cax-brand-strong: var(--color-teal-800);
-        --color-cax-brand-soft: var(--color-teal-100);
-        --color-cax-accent: var(--color-orange-700);
-        --color-cax-accent-soft: var(--color-orange-100);
-        --color-cax-danger: var(--color-red-600);
-        --color-cax-danger-soft: var(--color-red-100);
-        --color-cax-highlight: var(--color-amber-200);
-        --color-cax-highlight-ink: var(--color-amber-950);
-      }
-
-      @utility markdown {
-        @apply text-sm wrap-anywhere;
-        line-break: strict;
-
-        /* インライン要素 */
-        :where(a) {
-          @apply text-cax-accent decoration-cax-accent underline underline-offset-2;
-        }
-        :where(strong) {
-          @apply font-bold;
-        }
-        :where(em) {
-          @apply italic;
-        }
-        :where(code):not(:where(pre > code)) {
-          @apply bg-cax-surface-subtle text-cax-text rounded px-1 py-0.5 font-mono;
-        }
-        :where(del) {
-          @apply decoration-cax-text-subtle line-through;
-        }
-
-        /* ブロック要素 */
-        :where(p) {
-          @apply text-cax-text my-6;
-        }
-        :where(blockquote) {
-          @apply border-cax-border text-cax-text-muted my-6 border-l-4 pl-4;
-        }
-        :where(hr) {
-          @apply border-cax-border my-10 border-t;
-        }
-
-        /* リスト */
-        :where(ol) {
-          @apply my-6 list-decimal pl-6;
-        }
-        :where(ul) {
-          @apply my-6 list-disc pl-6;
-        }
-        :where(li) {
-          @apply my-2;
-        }
-        :where(ol > li, ul > li)::marker {
-          @apply text-cax-text-muted;
-        }
-        :where(ol ol, ul ul, ol ul, ul ol) {
-          @apply my-2;
-        }
-
-        /* テーブル */
-        :where(table) {
-          @apply text-cax-text my-6 w-full table-auto text-sm;
-        }
-        :where(thead) {
-          @apply border-cax-border border-b;
-        }
-        :where(thead th) {
-          @apply px-2 pb-1.5 font-bold;
-        }
-        :where(tbody tr) {
-          @apply border-cax-border border-b;
-        }
-        :where(tbody tr:last-child) {
-          @apply border-b-0;
-        }
-        :where(tbody td) {
-          @apply align-baseline;
-        }
-        :where(tfoot) {
-          @apply border-cax-border border-t;
-        }
-        :where(tfoot td) {
-          @apply align-top;
-        }
-        :where(th, td) {
-          @apply text-left;
-        }
-        :where(tbody td, tfoot td) {
-          @apply px-2 py-1.5;
-        }
-        :where(tbody tr:last-child td, tfoot tr:last-child td) {
-          @apply pb-0;
-        }
-
-        /* 見出し */
-        :where(h1, h2, h3, h4, h5, h6) {
-          @apply text-cax-text text-pretty;
-        }
-        :where(h1, h2, h3, h4) {
-          @apply font-bold;
-        }
-        :where(h1, h2) {
-          @apply mt-10 mb-8 text-2xl;
-        }
-        :where(h3) {
-          @apply mt-8 mb-6 text-xl;
-        }
-        :where(h4) {
-          @apply mt-6 mb-4 text-lg;
-        }
-        :where(h5) {
-          @apply border-cax-border mt-6 mb-4 border-b py-0.5 pl-2 font-bold;
-        }
-        :where(h6) {
-          @apply border-cax-border mt-6 mb-4 border-b py-0.5 pl-2;
-        }
-        :where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
-          @apply mt-0;
-        }
-
-        /* 注釈 */
-        :where(.footnotes) {
-          @apply border-cax-border mt-8 border-t;
-        }
-        :where(.footnotes h2) {
-          @apply sr-only;
-        }
-        :where(.footnotes ol) {
-          @apply mt-8 mb-0 text-sm;
-        }
-        :where(.footnotes ol li p) {
-          @apply my-0;
-        }
-
-        /* 最初の要素はマージンを0にする */
-        & > *:first-child {
-          @apply mt-0;
-        }
-
-        /* 最後の要素はマージンを0にする */
-        & > *:last-child {
-          @apply mb-0;
-        }
-      }
-    </style>
   </head>
   <body class="bg-cax-canvas text-cax-text">
     <div id="app"></div>
diff --git a/application/client/src/search/services.ts b/application/client/src/search/services.ts
index 77f9de5de9..5d704ebbd7 100644
--- a/application/client/src/search/services.ts
+++ b/application/client/src/search/services.ts
@@ -1,39 +1,77 @@
-export const sanitizeSearchText = (input: string): string => {
-  let text = input;
+const DATE_PREFIXES = ["since", "until"] as const;
+
+function normalizeDateToken(token: string): string {
+  const trimmed = token.trim();
+
+  for (const prefix of ["from", ...DATE_PREFIXES]) {
+    const normalizedPrefix = prefix === "from" ? "since" : prefix;
+    const lower = trimmed.toLowerCase();
+
+    if (!lower.startsWith(prefix)) {
+      continue;
+    }
+
+    const remainder = trimmed.slice(prefix.length).replace(/^:/, "");
+    const match = /\d{4}-\d{2}-\d{2}/.exec(remainder);
+    if (match != null) {
+      return `${normalizedPrefix}:${match[0]}`;
+    }
+  }
 
-  text = text.replace(
-    /\b(from|until)\s*:?\s*(\d{4}-\d{2}-\d{2})\d*/gi,
-    (_m, key, date) => `${key}:${date}`,
-  );
+  return trimmed;
+}
 
-  return text;
+function extractDateToken(token: string, prefix: (typeof DATE_PREFIXES)[number]): string | null {
+  const normalizedPrefix = `${prefix}:`;
+  if (!token.toLowerCase().startsWith(normalizedPrefix)) {
+    return null;
+  }
+
+  const candidate = token.slice(normalizedPrefix.length);
+  const match = /\d{4}-\d{2}-\d{2}/.exec(candidate);
+  return match?.[0] ?? null;
+}
+
+export const sanitizeSearchText = (input: string): string => {
+  return input
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map(normalizeDateToken)
+    .join(" ");
 };
 
 export const parseSearchQuery = (query: string) => {
-  const sincePattern = /since:((\d|\d\d|\d\d\d\d-\d\d-\d\d)+)+$/;
-  const untilPattern = /until:((\d|\d\d|\d\d\d\d-\d\d-\d\d)+)+$/;
+  const tokens = query.trim().split(/\s+/).filter(Boolean).map(normalizeDateToken);
 
-  const sincePart = query.match(/since:[^\s]*/)?.[0] || "";
-  const untilPart = query.match(/until:[^\s]*/)?.[0] || "";
+  const keywordTokens: string[] = [];
+  let sinceDate: string | null = null;
+  let sinceToken: string | null = null;
+  let untilDate: string | null = null;
+  let untilToken: string | null = null;
 
-  const sinceMatch = sincePattern.exec(sincePart);
-  const untilMatch = untilPattern.exec(untilPart);
+  for (const token of tokens) {
+    if (token.toLowerCase().startsWith("since:")) {
+      sinceToken = token;
+      sinceDate = extractDateToken(token, "since");
+      continue;
+    }
 
-  const keywords = query
-    .replace(/since:.*(\d{4}-\d{2}-\d{2}).*/g, "")
-    .replace(/until:.*(\d{4}-\d{2}-\d{2}).*/g, "")
-    .trim();
+    if (token.toLowerCase().startsWith("until:")) {
+      untilToken = token;
+      untilDate = extractDateToken(token, "until");
+      continue;
+    }
 
-  const extractDate = (s: string | null) => {
-    if (!s) return null;
-    const m = /(\d{4}-\d{2}-\d{2})/.exec(s);
-    return m ? m[1] : null;
-  };
+    keywordTokens.push(token);
+  }
 
   return {
-    keywords,
-    sinceDate: extractDate(sinceMatch ? sinceMatch[1]! : null),
-    untilDate: extractDate(untilMatch ? untilMatch[1]! : null),
+    keywords: keywordTokens.join(" "),
+    sinceDate,
+    sinceToken,
+    untilDate,
+    untilToken,
   };
 };
 
diff --git a/application/client/src/search/validation.ts b/application/client/src/search/validation.ts
index 1da46e6d8d..6daca7da53 100644
--- a/application/client/src/search/validation.ts
+++ b/application/client/src/search/validation.ts
@@ -15,20 +15,20 @@ export const validate = (values: SearchFormData): FormErrors<SearchFormData> =>
     return errors;
   }
 
-  const { keywords, sinceDate, untilDate } = parseSearchQuery(raw);
+  const { keywords, sinceDate, sinceToken, untilDate, untilToken } = parseSearchQuery(raw);
 
   if (!keywords && !sinceDate && !untilDate) {
     errors.searchText = "検索キーワードまたは日付範囲を指定してください";
     return errors;
   }
 
-  if (sinceDate && !isValidDate(sinceDate)) {
-    errors.searchText = `since: の日付形式が不正です: ${sinceDate}`;
+  if (sinceToken && (!sinceDate || !isValidDate(sinceDate))) {
+    errors.searchText = `since: の日付形式が不正です: ${sinceToken.replace(/^since:/i, "")}`;
     return errors;
   }
 
-  if (untilDate && !isValidDate(untilDate)) {
-    errors.searchText = `until: の日付形式が不正です: ${untilDate}`;
+  if (untilToken && (!untilDate || !isValidDate(untilDate))) {
+    errors.searchText = `until: の日付形式が不正です: ${untilToken.replace(/^until:/i, "")}`;
     return errors;
   }
 
diff --git a/application/client/src/utils/date_format.ts b/application/client/src/utils/date_format.ts
new file mode 100644
index 0000000000..167d0cdf15
--- /dev/null
+++ b/application/client/src/utils/date_format.ts
@@ -0,0 +1,49 @@
+const longDateFormatter = new Intl.DateTimeFormat("ja-JP", {
+  dateStyle: "long",
+});
+
+const timeFormatter = new Intl.DateTimeFormat("ja-JP", {
+  hour: "2-digit",
+  minute: "2-digit",
+});
+
+const relativeTimeFormatter = new Intl.RelativeTimeFormat("ja-JP", {
+  numeric: "auto",
+});
+
+function toDate(value: Date | string): Date {
+  return value instanceof Date ? value : new Date(value);
+}
+
+export function toISOString(value: Date | string): string {
+  return toDate(value).toISOString();
+}
+
+export function formatLongDateJa(value: Date | string): string {
+  return longDateFormatter.format(toDate(value));
+}
+
+export function formatTimeJa(value: Date | string): string {
+  return timeFormatter.format(toDate(value));
+}
+
+export function formatRelativeFromNowJa(value: Date | string): string {
+  const target = toDate(value).getTime();
+  const diffMs = target - Date.now();
+
+  const units: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+    ["year", 1000 * 60 * 60 * 24 * 365],
+    ["month", 1000 * 60 * 60 * 24 * 30],
+    ["day", 1000 * 60 * 60 * 24],
+    ["hour", 1000 * 60 * 60],
+    ["minute", 1000 * 60],
+  ];
+
+  for (const [unit, size] of units) {
+    if (Math.abs(diffMs) >= size) {
+      return relativeTimeFormatter.format(Math.round(diffMs / size), unit);
+    }
+  }
+
+  return relativeTimeFormatter.format(Math.round(diffMs / 1000), "second");
+}
diff --git a/application/client/webpack.config.js b/application/client/webpack.config.js
index 71d4adc475..945c1c32f3 100644
--- a/application/client/webpack.config.js
+++ b/application/client/webpack.config.js
@@ -29,8 +29,6 @@ const config = {
   devtool: isProduction ? false : "inline-source-map",
   entry: {
     main: [
-      "core-js",
-      "regenerator-runtime/runtime",
       path.resolve(SRC_PATH, "./index.css"),
       path.resolve(SRC_PATH, "./buildinfo.ts"),
       path.resolve(SRC_PATH, "./index.tsx"),
diff --git a/application/pnpm-lock.yaml b/application/pnpm-lock.yaml
index 510570f5c9..18f6e6997c 100644
--- a/application/pnpm-lock.yaml
+++ b/application/pnpm-lock.yaml
@@ -62,7 +62,7 @@ importers:
         version: 9.5.0
       gifler:
         specifier: github:themadcreator/gifler#v0.3.0
-        version: https://codeload.github.com/themadcreator/gifler/tar.gz/c3259b071c7782f85d4928a5f03d0b378ed003b5
+        version: https://codeload.github.com/themadcreator/gifler/tar.gz/89484cb3db174c584a3138e89664f0167a7760c1
       image-size:
         specifier: 2.0.2
         version: 2.0.2
@@ -160,6 +160,9 @@ importers:
       '@babel/preset-typescript':
         specifier: 7.27.1
         version: 7.27.1(@babel/core@7.28.4)
+      '@tailwindcss/postcss':
+        specifier: 4.2.2
+        version: 4.2.2
       '@tsconfig/strictest':
         specifier: 2.0.8
         version: 2.0.8
@@ -238,6 +241,9 @@ importers:
       react-markdown:
         specifier: 10.1.0
         version: 10.1.0(@types/react@19.2.2)(react@19.2.0)
+      tailwindcss:
+        specifier: 4.2.2
+        version: 4.2.2
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -350,6 +356,10 @@ importers:
 
 packages:
 
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -1608,6 +1618,98 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@tailwindcss/node@4.2.2':
+    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.2':
+    resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.2.2':
+    resolution: {integrity: sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ==}
+
   '@tokenizer/inflate@0.4.1':
     resolution: {integrity: sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA==}
     engines: {node: '>=18'}
@@ -2426,6 +2528,10 @@ packages:
     resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
 
+  enhanced-resolve@5.20.1:
+    resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
+    engines: {node: '>=10.13.0'}
+
   entities@2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
 
@@ -2667,8 +2773,8 @@ packages:
   get-tsconfig@4.13.0:
     resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
 
-  gifler@https://codeload.github.com/themadcreator/gifler/tar.gz/c3259b071c7782f85d4928a5f03d0b378ed003b5:
-    resolution: {tarball: https://codeload.github.com/themadcreator/gifler/tar.gz/c3259b071c7782f85d4928a5f03d0b378ed003b5}
+  gifler@https://codeload.github.com/themadcreator/gifler/tar.gz/89484cb3db174c584a3138e89664f0167a7760c1:
+    resolution: {tarball: https://codeload.github.com/themadcreator/gifler/tar.gz/89484cb3db174c584a3138e89664f0167a7760c1}
     version: 0.3.0
 
   github-from-package@0.0.0:
@@ -3075,6 +3181,80 @@ packages:
   launch-editor@2.11.1:
     resolution: {integrity: sha512-SEET7oNfgSaB6Ym0jufAdCeo3meJVeCaaDyzRygy0xsp2BFKCprcfHljTq4QkzTLUxEKkFK6OK4811YM2oSrRg==}
 
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -3120,6 +3300,9 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
   make-fetch-happen@9.1.0:
     resolution: {integrity: sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==}
     engines: {node: '>= 10'}
@@ -4343,6 +4526,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwindcss@4.2.2:
+    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
+
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
@@ -4691,6 +4877,8 @@ packages:
 
 snapshots:
 
+  '@alloc/quick-lru@5.2.0': {}
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -5972,6 +6160,75 @@ snapshots:
     dependencies:
       playwright: 1.50.1
 
+  '@tailwindcss/node@4.2.2':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.20.1
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.2
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.2':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-x64': 4.2.2
+      '@tailwindcss/oxide-freebsd-x64': 4.2.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
+
+  '@tailwindcss/postcss@4.2.2':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.2.2
+      '@tailwindcss/oxide': 4.2.2
+      postcss: 8.5.6
+      tailwindcss: 4.2.2
+
   '@tokenizer/inflate@0.4.1':
     dependencies:
       debug: 4.4.3
@@ -6856,6 +7113,11 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
+  enhanced-resolve@5.20.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
   entities@2.2.0: {}
 
   entities@6.0.1: {}
@@ -7161,7 +7423,7 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
-  gifler@https://codeload.github.com/themadcreator/gifler/tar.gz/c3259b071c7782f85d4928a5f03d0b378ed003b5:
+  gifler@https://codeload.github.com/themadcreator/gifler/tar.gz/89484cb3db174c584a3138e89664f0167a7760c1:
     dependencies:
       bluebird: 3.7.2
       omggif: 1.0.10
@@ -7593,6 +7855,55 @@ snapshots:
       picocolors: 1.1.1
       shell-quote: 1.8.3
 
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
   lines-and-columns@1.2.4: {}
 
   loader-runner@4.3.1: {}
@@ -7635,6 +7946,10 @@ snapshots:
       yallist: 4.0.0
     optional: true
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   make-fetch-happen@9.1.0:
     dependencies:
       agentkeepalive: 4.6.0
@@ -9320,6 +9635,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwindcss@4.2.2: {}
+
   tapable@2.3.0: {}
 
   tar-fs@2.1.4:
diff --git a/application/server/src/routes/api/search.ts b/application/server/src/routes/api/search.ts
index 48e99856b4..fee075ea58 100644
--- a/application/server/src/routes/api/search.ts
+++ b/application/server/src/routes/api/search.ts
@@ -70,6 +70,7 @@ searchRouter.get("/search", async (req, res) => {
       ],
       limit,
       offset,
+      subQuery: false,
       where: dateWhere,
     });
   }

From 85433df60c22861f56114bbaba6280b40f43f060 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 02:02:47 +0900
Subject: [PATCH 03/21] Gate DM websocket and read calls

---
 .../client/src/containers/DirectMessageContainer.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/application/client/src/containers/DirectMessageContainer.tsx b/application/client/src/containers/DirectMessageContainer.tsx
index 145b6b00d7..235205f662 100644
--- a/application/client/src/containers/DirectMessageContainer.tsx
+++ b/application/client/src/containers/DirectMessageContainer.tsx
@@ -53,13 +53,19 @@ export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
   }, [activeUser, conversationId]);
 
   const sendRead = useCallback(async () => {
+    if (activeUser == null || conversationId === "") {
+      return;
+    }
     await sendJSON(`/api/v1/dm/${conversationId}/read`, {});
-  }, [conversationId]);
+  }, [activeUser, conversationId]);
 
   useEffect(() => {
+    if (activeUser == null || conversationId === "") {
+      return;
+    }
     void loadConversation();
     void sendRead();
-  }, [loadConversation, sendRead]);
+  }, [activeUser, conversationId, loadConversation, sendRead]);
 
   const handleSubmit = useCallback(
     async (params: DirectMessageFormData) => {
@@ -104,7 +110,7 @@ export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
         }, TYPING_INDICATOR_DURATION_MS);
       }
     },
-    { delayMs: 5000 },
+    { delayMs: 5000, enabled: activeUser != null && conversationId !== "" },
   );
 
   if (activeUser === null) {

From 8dc6dbff579099612d9d3e9fa0ac8144b60066e0 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 02:06:52 +0900
Subject: [PATCH 04/21] Trim payloads and add image loading hints

---
 .../components/application/AccountMenu.tsx    |  3 +++
 .../direct_message/DirectMessageListPage.tsx  |  4 ++++
 .../direct_message/DirectMessagePage.tsx      |  4 ++++
 .../components/foundation/CoveredImage.tsx    |  6 +++++-
 .../src/components/post/CommentItem.tsx       |  4 ++++
 .../client/src/components/post/ImageArea.tsx  | 10 +++++++--
 .../client/src/components/post/PostItem.tsx   |  2 +-
 .../src/components/timeline/TimelineItem.tsx  |  4 ++++
 .../user_profile/UserProfileHeader.tsx        |  4 ++++
 application/server/src/models/Comment.ts      |  4 ++--
 .../server/src/models/DirectMessage.ts        |  3 ++-
 .../src/models/DirectMessageConversation.ts   | 21 ++++++++++++++++---
 application/server/src/models/Post.ts         |  9 ++++----
 application/server/src/models/User.ts         |  5 ++++-
 14 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/application/client/src/components/application/AccountMenu.tsx b/application/client/src/components/application/AccountMenu.tsx
index b6df12bbab..2fe03f34c2 100644
--- a/application/client/src/components/application/AccountMenu.tsx
+++ b/application/client/src/components/application/AccountMenu.tsx
@@ -40,7 +40,10 @@ export const AccountMenu = ({ user, onLogout }: Props) => {
         <img
           alt={user.profileImage.alt}
           className="h-10 w-10 shrink-0 rounded-full object-cover"
+          decoding="async"
+          height="40"
           src={getProfileImagePath(user.profileImage.id)}
+          width="40"
         />
         <div className="hidden min-w-0 flex-1 text-left lg:block">
           <div className="text-cax-text truncate text-sm font-bold">{user.name}</div>
diff --git a/application/client/src/components/direct_message/DirectMessageListPage.tsx b/application/client/src/components/direct_message/DirectMessageListPage.tsx
index f35e9e160f..74e9fb2972 100644
--- a/application/client/src/components/direct_message/DirectMessageListPage.tsx
+++ b/application/client/src/components/direct_message/DirectMessageListPage.tsx
@@ -95,7 +95,11 @@ export const DirectMessageListPage = ({ activeUser, newDmModalId }: Props) => {
                     <img
                       alt={peer.profileImage.alt}
                       className="w-12 shrink-0 self-start rounded-full"
+                      decoding="async"
+                      height="48"
+                      loading="lazy"
                       src={getProfileImagePath(peer.profileImage.id)}
+                      width="48"
                     />
                     <div className="flex flex-1 flex-col">
                       <div className="flex items-center justify-between">
diff --git a/application/client/src/components/direct_message/DirectMessagePage.tsx b/application/client/src/components/direct_message/DirectMessagePage.tsx
index 17ecb30035..ea3f818b27 100644
--- a/application/client/src/components/direct_message/DirectMessagePage.tsx
+++ b/application/client/src/components/direct_message/DirectMessagePage.tsx
@@ -89,7 +89,11 @@ export const DirectMessagePage = ({
         <img
           alt={peer.profileImage.alt}
           className="h-12 w-12 rounded-full object-cover"
+          decoding="async"
+          fetchPriority="high"
+          height="48"
           src={getProfileImagePath(peer.profileImage.id)}
+          width="48"
         />
         <div className="min-w-0">
           <h1 className="overflow-hidden text-xl font-bold text-ellipsis whitespace-nowrap">
diff --git a/application/client/src/components/foundation/CoveredImage.tsx b/application/client/src/components/foundation/CoveredImage.tsx
index ee46e0e47b..325923af30 100644
--- a/application/client/src/components/foundation/CoveredImage.tsx
+++ b/application/client/src/components/foundation/CoveredImage.tsx
@@ -7,13 +7,15 @@ import { fetchBinary } from "@web-speed-hackathon-2026/client/src/utils/fetchers
 
 interface Props {
   alt?: string;
+  fetchPriority?: "auto" | "high" | "low";
+  loading?: "eager" | "lazy";
   src: string;
 }
 
 /**
  * アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように画像を拡大縮小します
  */
-export const CoveredImage = ({ alt = "", src }: Props) => {
+export const CoveredImage = ({ alt = "", fetchPriority = "auto", loading = "lazy", src }: Props) => {
   const dialogId = useId();
   // ダイアログの背景をクリックしたときに投稿詳細ページに遷移しないようにする
   const handleDialogClick = useCallback((ev: MouseEvent<HTMLDialogElement>) => {
@@ -44,6 +46,8 @@ export const CoveredImage = ({ alt = "", src }: Props) => {
         alt={alt}
         className="h-full w-full object-cover"
         decoding="async"
+        fetchPriority={fetchPriority}
+        loading={loading}
         src={src}
       />
 
diff --git a/application/client/src/components/post/CommentItem.tsx b/application/client/src/components/post/CommentItem.tsx
index 33a2588320..9bad2d3f00 100644
--- a/application/client/src/components/post/CommentItem.tsx
+++ b/application/client/src/components/post/CommentItem.tsx
@@ -24,7 +24,11 @@ export const CommentItem = ({ comment }: Props) => {
           >
             <img
               alt={comment.user.profileImage.alt}
+              decoding="async"
+              height="48"
+              loading="lazy"
               src={getProfileImagePath(comment.user.profileImage.id)}
+              width="48"
             />
           </Link>
         </div>
diff --git a/application/client/src/components/post/ImageArea.tsx b/application/client/src/components/post/ImageArea.tsx
index 918003c6f3..f50c11d37a 100644
--- a/application/client/src/components/post/ImageArea.tsx
+++ b/application/client/src/components/post/ImageArea.tsx
@@ -6,9 +6,10 @@ import { getImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_pat
 
 interface Props {
   images: Models.Image[];
+  priority?: boolean;
 }
 
-export const ImageArea = ({ images }: Props) => {
+export const ImageArea = ({ images, priority = false }: Props) => {
   return (
     <AspectRatioBox aspectHeight={9} aspectWidth={16}>
       <div className="border-cax-border grid h-full w-full grid-cols-2 grid-rows-2 gap-1 overflow-hidden rounded-lg border">
@@ -24,7 +25,12 @@ export const ImageArea = ({ images }: Props) => {
                 "row-span-2": images.length <= 2 || (images.length === 3 && idx === 0),
               })}
             >
-              <CoveredImage alt={image.alt} src={getImagePath(image.id)} />
+              <CoveredImage
+                alt={image.alt}
+                fetchPriority={priority ? "high" : "auto"}
+                loading={priority ? "eager" : "lazy"}
+                src={getImagePath(image.id)}
+              />
             </div>
           );
         })}
diff --git a/application/client/src/components/post/PostItem.tsx b/application/client/src/components/post/PostItem.tsx
index 431ccae761..cd515107ca 100644
--- a/application/client/src/components/post/PostItem.tsx
+++ b/application/client/src/components/post/PostItem.tsx
@@ -54,7 +54,7 @@ export const PostItem = ({ post }: Props) => {
           </div>
           {post.images?.length > 0 ? (
             <div className="relative mt-2 w-full">
-              <ImageArea images={post.images} />
+              <ImageArea images={post.images} priority={true} />
             </div>
           ) : null}
           {post.movie ? (
diff --git a/application/client/src/components/timeline/TimelineItem.tsx b/application/client/src/components/timeline/TimelineItem.tsx
index 0340e0c1ba..16df0f8ed4 100644
--- a/application/client/src/components/timeline/TimelineItem.tsx
+++ b/application/client/src/components/timeline/TimelineItem.tsx
@@ -63,7 +63,11 @@ export const TimelineItem = ({ post }: Props) => {
           >
             <img
               alt={post.user.profileImage.alt}
+              decoding="async"
+              height="64"
+              loading="lazy"
               src={getProfileImagePath(post.user.profileImage.id)}
+              width="64"
             />
           </Link>
         </div>
diff --git a/application/client/src/components/user_profile/UserProfileHeader.tsx b/application/client/src/components/user_profile/UserProfileHeader.tsx
index a2b5ca8d50..65ffbf4672 100644
--- a/application/client/src/components/user_profile/UserProfileHeader.tsx
+++ b/application/client/src/components/user_profile/UserProfileHeader.tsx
@@ -33,8 +33,12 @@ export const UserProfileHeader = ({ user }: Props) => {
         <img
           alt=""
           crossOrigin="anonymous"
+          decoding="async"
+          fetchPriority="high"
+          height="128"
           onLoad={handleLoadImage}
           src={getProfileImagePath(user.profileImage.id)}
+          width="128"
         />
       </div>
       <div className="px-4 pt-20">
diff --git a/application/server/src/models/Comment.ts b/application/server/src/models/Comment.ts
index 41e9e4e094..f7d512e98a 100644
--- a/application/server/src/models/Comment.ts
+++ b/application/server/src/models/Comment.ts
@@ -47,8 +47,8 @@ export function initComment(sequelize: Sequelize) {
         include: [
           {
             association: "user",
-            attributes: { exclude: ["profileImageId"] },
-            include: [{ association: "profileImage" }],
+            attributes: ["id", "name", "username"],
+            include: [{ association: "profileImage", attributes: ["alt", "id"] }],
           },
         ],
         order: [["createdAt", "ASC"]],
diff --git a/application/server/src/models/DirectMessage.ts b/application/server/src/models/DirectMessage.ts
index e4565ba1c4..b2dc27fb8c 100644
--- a/application/server/src/models/DirectMessage.ts
+++ b/application/server/src/models/DirectMessage.ts
@@ -64,7 +64,8 @@ export function initDirectMessage(sequelize: Sequelize) {
         include: [
           {
             association: "sender",
-            include: [{ association: "profileImage" }],
+            attributes: ["id", "name", "username"],
+            include: [{ association: "profileImage", attributes: ["alt", "id"] }],
           },
         ],
         order: [["createdAt", "ASC"]],
diff --git a/application/server/src/models/DirectMessageConversation.ts b/application/server/src/models/DirectMessageConversation.ts
index 99ebb2425b..87415caea9 100644
--- a/application/server/src/models/DirectMessageConversation.ts
+++ b/application/server/src/models/DirectMessageConversation.ts
@@ -48,11 +48,26 @@ export function initDirectMessageConversation(sequelize: Sequelize) {
       sequelize,
       defaultScope: {
         include: [
-          { association: "initiator", include: [{ association: "profileImage" }] },
-          { association: "member", include: [{ association: "profileImage" }] },
+          {
+            association: "initiator",
+            attributes: ["id", "name", "username"],
+            include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+          },
+          {
+            association: "member",
+            attributes: ["id", "name", "username"],
+            include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+          },
           {
             association: "messages",
-            include: [{ association: "sender", include: [{ association: "profileImage" }] }],
+            attributes: ["body", "createdAt", "id", "isRead"],
+            include: [
+              {
+                association: "sender",
+                attributes: ["id", "name", "username"],
+                include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+              },
+            ],
             order: [["createdAt", "ASC"]],
             required: false,
           },
diff --git a/application/server/src/models/Post.ts b/application/server/src/models/Post.ts
index 6f86442eb1..a28477361f 100644
--- a/application/server/src/models/Post.ts
+++ b/application/server/src/models/Post.ts
@@ -49,15 +49,16 @@ export function initPost(sequelize: Sequelize) {
         include: [
           {
             association: "user",
-            attributes: { exclude: ["profileImageId"] },
-            include: [{ association: "profileImage" }],
+            attributes: ["createdAt", "description", "id", "name", "username"],
+            include: [{ association: "profileImage", attributes: ["alt", "id"] }],
           },
           {
             association: "images",
+            attributes: ["alt", "id"],
             through: { attributes: [] },
           },
-          { association: "movie" },
-          { association: "sound" },
+          { association: "movie", attributes: ["id"] },
+          { association: "sound", attributes: ["artist", "id", "title"] },
         ],
         order: [
           ["id", "DESC"],
diff --git a/application/server/src/models/User.ts b/application/server/src/models/User.ts
index 9085a287a3..97479760d0 100644
--- a/application/server/src/models/User.ts
+++ b/application/server/src/models/User.ts
@@ -79,7 +79,10 @@ export function initUser(sequelize: Sequelize) {
       sequelize,
       defaultScope: {
         attributes: { exclude: ["profileImageId"] },
-        include: { association: "profileImage" },
+        include: {
+          association: "profileImage",
+          attributes: ["alt", "id"],
+        },
       },
     },
   );

From 0077a135cdc381a47b7bdceb1bcd6bad19e90bdf Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 02:33:36 +0900
Subject: [PATCH 05/21] Defer media work and preserve uploaded image alt

---
 .../components/foundation/PausableMovie.tsx   | 38 +++++++++++----
 .../src/components/foundation/SoundPlayer.tsx | 46 +++++++++++++++----
 .../new_post_modal/NewPostModalPage.tsx       | 14 ++++--
 .../client/src/containers/AppContainer.tsx    | 26 +++++------
 .../src/containers/NewPostModalContainer.tsx  | 15 +++++-
 application/client/src/hooks/use_fetch.ts     |  9 ++++
 .../client/src/hooks/use_visibility.ts        | 33 +++++++++++++
 application/client/src/utils/convert_image.ts | 17 +++++--
 application/client/src/utils/fetchers.ts      |  7 ++-
 application/server/src/routes/api/image.ts    |  5 +-
 10 files changed, 166 insertions(+), 44 deletions(-)
 create mode 100644 application/client/src/hooks/use_visibility.ts

diff --git a/application/client/src/components/foundation/PausableMovie.tsx b/application/client/src/components/foundation/PausableMovie.tsx
index 98b0df55b0..bf80199b6f 100644
--- a/application/client/src/components/foundation/PausableMovie.tsx
+++ b/application/client/src/components/foundation/PausableMovie.tsx
@@ -1,11 +1,12 @@
 import classNames from "classnames";
 import { Animator, Decoder } from "gifler";
 import { GifReader } from "omggif";
-import { RefCallback, useCallback, useRef, useState } from "react";
+import { RefCallback, useCallback, useEffect, useRef, useState } from "react";
 
 import { AspectRatioBox } from "@web-speed-hackathon-2026/client/src/components/foundation/AspectRatioBox";
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { useFetch } from "@web-speed-hackathon-2026/client/src/hooks/use_fetch";
+import { useVisibility } from "@web-speed-hackathon-2026/client/src/hooks/use_visibility";
 import { fetchBinary } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
 interface Props {
@@ -16,7 +17,15 @@ interface Props {
  * クリックすると再生・一時停止を切り替えます。
  */
 export const PausableMovie = ({ src }: Props) => {
-  const { data, isLoading } = useFetch(src, fetchBinary);
+  const { isVisible, ref } = useVisibility();
+  const [shouldLoad, setShouldLoad] = useState(false);
+  useEffect(() => {
+    if (isVisible) {
+      setShouldLoad(true);
+    }
+  }, [isVisible]);
+
+  const { data, isLoading } = useFetch(shouldLoad ? src : "", fetchBinary);
 
   const animatorRef = useRef<Animator>(null);
   const canvasCallbackRef = useCallback<RefCallback<HTMLCanvasElement>>(
@@ -61,28 +70,37 @@ export const PausableMovie = ({ src }: Props) => {
     });
   }, []);
 
-  if (isLoading || data === null) {
-    return null;
-  }
-
   return (
     <AspectRatioBox aspectHeight={1} aspectWidth={1}>
       <button
         aria-label="動画プレイヤー"
         className="group relative block h-full w-full"
-        onClick={handleClick}
+        onClick={() => {
+          setShouldLoad(true);
+          if (data !== null && !isLoading) {
+            handleClick();
+          }
+        }}
+        ref={ref as unknown as RefCallback<HTMLButtonElement>}
         type="button"
       >
-        <canvas ref={canvasCallbackRef} className="w-full" />
+        {data !== null ? (
+          <canvas ref={canvasCallbackRef} className="w-full" />
+        ) : (
+          <div className="bg-cax-surface-subtle h-full w-full" />
+        )}
         <div
           className={classNames(
             "absolute left-1/2 top-1/2 flex items-center justify-center w-16 h-16 text-cax-surface-raised text-3xl bg-cax-overlay/50 rounded-full -translate-x-1/2 -translate-y-1/2",
             {
-              "opacity-0 group-hover:opacity-100": isPlaying,
+              "opacity-0 group-hover:opacity-100": isPlaying && data !== null,
             },
           )}
         >
-          <FontAwesomeIcon iconType={isPlaying ? "pause" : "play"} styleType="solid" />
+          <FontAwesomeIcon
+            iconType={data !== null && isPlaying ? "pause" : "play"}
+            styleType="solid"
+          />
         </div>
       </button>
     </AspectRatioBox>
diff --git a/application/client/src/components/foundation/SoundPlayer.tsx b/application/client/src/components/foundation/SoundPlayer.tsx
index 2fb4784189..dfa576f035 100644
--- a/application/client/src/components/foundation/SoundPlayer.tsx
+++ b/application/client/src/components/foundation/SoundPlayer.tsx
@@ -1,9 +1,10 @@
-import { ReactEventHandler, useCallback, useMemo, useRef, useState } from "react";
+import { ReactEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { AspectRatioBox } from "@web-speed-hackathon-2026/client/src/components/foundation/AspectRatioBox";
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { SoundWaveSVG } from "@web-speed-hackathon-2026/client/src/components/foundation/SoundWaveSVG";
 import { useFetch } from "@web-speed-hackathon-2026/client/src/hooks/use_fetch";
+import { useVisibility } from "@web-speed-hackathon-2026/client/src/hooks/use_visibility";
 import { fetchBinary } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 import { getSoundPath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
@@ -12,7 +13,15 @@ interface Props {
 }
 
 export const SoundPlayer = ({ sound }: Props) => {
-  const { data, isLoading } = useFetch(getSoundPath(sound.id), fetchBinary);
+  const { isVisible, ref } = useVisibility();
+  const [shouldLoad, setShouldLoad] = useState(false);
+  useEffect(() => {
+    if (isVisible) {
+      setShouldLoad(true);
+    }
+  }, [isVisible]);
+
+  const { data, isLoading } = useFetch(shouldLoad ? getSoundPath(sound.id) : "", fetchBinary);
 
   const blobUrl = useMemo(() => {
     return data !== null ? URL.createObjectURL(new Blob([data])) : null;
@@ -25,8 +34,15 @@ export const SoundPlayer = ({ sound }: Props) => {
   }, []);
 
   const audioRef = useRef<HTMLAudioElement>(null);
+  const pendingPlayRef = useRef(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const handleTogglePlaying = useCallback(() => {
+    if (blobUrl === null) {
+      pendingPlayRef.current = true;
+      setShouldLoad(true);
+      return;
+    }
+
     setIsPlaying((isPlaying) => {
       if (isPlaying) {
         audioRef.current?.pause();
@@ -35,15 +51,23 @@ export const SoundPlayer = ({ sound }: Props) => {
       }
       return !isPlaying;
     });
-  }, []);
+  }, [blobUrl]);
+
+  useEffect(() => {
+    if (!pendingPlayRef.current || blobUrl === null) {
+      return;
+    }
 
-  if (isLoading || data === null || blobUrl === null) {
-    return null;
-  }
+    pendingPlayRef.current = false;
+    void audioRef.current?.play();
+    setIsPlaying(true);
+  }, [blobUrl]);
 
   return (
-    <div className="bg-cax-surface-subtle flex h-full w-full items-center justify-center">
-      <audio ref={audioRef} loop={true} onTimeUpdate={handleTimeUpdate} src={blobUrl} />
+    <div ref={ref as React.Ref<HTMLDivElement>} className="bg-cax-surface-subtle flex h-full w-full items-center justify-center">
+      {blobUrl !== null ? (
+        <audio ref={audioRef} loop={true} onTimeUpdate={handleTimeUpdate} src={blobUrl} />
+      ) : null}
       <div className="p-2">
         <button
           className="bg-cax-accent text-cax-surface-raised flex h-8 w-8 items-center justify-center rounded-full text-sm hover:opacity-75"
@@ -64,7 +88,11 @@ export const SoundPlayer = ({ sound }: Props) => {
           <AspectRatioBox aspectHeight={1} aspectWidth={10}>
             <div className="relative h-full w-full">
               <div className="absolute inset-0 h-full w-full">
-                <SoundWaveSVG soundData={data} />
+                {data !== null && !isLoading ? (
+                  <SoundWaveSVG soundData={data} />
+                ) : (
+                  <div className="bg-cax-border/30 h-full w-full rounded-sm" />
+                )}
               </div>
               <div
                 className="bg-cax-surface-subtle absolute inset-0 h-full w-full opacity-75"
diff --git a/application/client/src/components/new_post_modal/NewPostModalPage.tsx b/application/client/src/components/new_post_modal/NewPostModalPage.tsx
index a6e1910863..bdbd6dd541 100644
--- a/application/client/src/components/new_post_modal/NewPostModalPage.tsx
+++ b/application/client/src/components/new_post_modal/NewPostModalPage.tsx
@@ -7,8 +7,13 @@ import { AttachFileInputButton } from "@web-speed-hackathon-2026/client/src/comp
 
 const MAX_UPLOAD_BYTES_LIMIT = 10 * 1024 * 1024;
 
+interface ImageUpload {
+  alt: string;
+  file: File;
+}
+
 interface SubmitParams {
-  images: File[];
+  images: ImageUpload[];
   movie: File | undefined;
   sound: File | undefined;
   text: string;
@@ -56,9 +61,10 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
         .then(([{ MagickFormat }, { convertImage }]) =>
           Promise.all(
             files.map((file) =>
-              convertImage(file, { extension: MagickFormat.Jpg }).then(
-                (blob) => new File([blob], "converted.jpg", { type: "image/jpeg" }),
-              ),
+              convertImage(file, { extension: MagickFormat.Jpg }).then(({ alt, blob }) => ({
+                alt,
+                file: new File([blob], "converted.jpg", { type: "image/jpeg" }),
+              })),
             ),
           ),
         )
diff --git a/application/client/src/containers/AppContainer.tsx b/application/client/src/containers/AppContainer.tsx
index a1501253e0..a43076fe93 100644
--- a/application/client/src/containers/AppContainer.tsx
+++ b/application/client/src/containers/AppContainer.tsx
@@ -1,5 +1,5 @@
 import { Suspense, lazy, useCallback, useEffect, useId, useState } from "react";
-import { Helmet, HelmetProvider } from "react-helmet";
+import { HelmetProvider } from "react-helmet";
 import { Route, Routes, useLocation, useNavigate } from "react-router";
 
 import { AppPage } from "@web-speed-hackathon-2026/client/src/components/application/AppPage";
@@ -50,16 +50,6 @@ export const AppContainer = () => {
   const authModalId = useId();
   const newPostModalId = useId();
 
-  if (isLoadingActiveUser) {
-    return (
-      <HelmetProvider>
-        <Helmet>
-          <title>読込中 - CaX</title>
-        </Helmet>
-      </HelmetProvider>
-    );
-  }
-
   return (
     <HelmetProvider>
       <AppPage
@@ -72,12 +62,18 @@ export const AppContainer = () => {
           <Route element={<TimelineContainer />} path="/" />
           <Route
             element={
-              <DirectMessageListContainer activeUser={activeUser} authModalId={authModalId} />
+              isLoadingActiveUser ? null : (
+                <DirectMessageListContainer activeUser={activeUser} authModalId={authModalId} />
+              )
             }
             path="/dm"
           />
           <Route
-            element={<DirectMessageContainer activeUser={activeUser} authModalId={authModalId} />}
+            element={
+              isLoadingActiveUser ? null : (
+                <DirectMessageContainer activeUser={activeUser} authModalId={authModalId} />
+              )
+            }
             path="/dm/:conversationId"
           />
           <Route element={<SearchContainer />} path="/search" />
@@ -87,7 +83,9 @@ export const AppContainer = () => {
           <Route
             element={
               <Suspense fallback={null}>
-                <LazyCrokContainer activeUser={activeUser} authModalId={authModalId} />
+                {!isLoadingActiveUser ? (
+                  <LazyCrokContainer activeUser={activeUser} authModalId={authModalId} />
+                ) : null}
               </Suspense>
             }
             path="/crok"
diff --git a/application/client/src/containers/NewPostModalContainer.tsx b/application/client/src/containers/NewPostModalContainer.tsx
index 8ea916d711..8e956dd71d 100644
--- a/application/client/src/containers/NewPostModalContainer.tsx
+++ b/application/client/src/containers/NewPostModalContainer.tsx
@@ -11,8 +11,13 @@ const LazyNewPostModalPage = lazy(async () => {
   return { default: module.NewPostModalPage };
 });
 
+interface ImageUpload {
+  alt: string;
+  file: File;
+}
+
 interface SubmitParams {
-  images: File[];
+  images: ImageUpload[];
   movie: File | undefined;
   sound: File | undefined;
   text: string;
@@ -21,7 +26,13 @@ interface SubmitParams {
 async function sendNewPost({ images, movie, sound, text }: SubmitParams): Promise<Models.Post> {
   const payload = {
     images: images
-      ? await Promise.all(images.map((image) => sendFile("/api/v1/images", image)))
+      ? await Promise.all(
+          images.map(({ alt, file }) =>
+            sendFile("/api/v1/images", file, {
+              "X-Image-Alt": encodeURIComponent(alt),
+            }),
+          ),
+        )
       : [],
     movie: movie ? await sendFile("/api/v1/movies", movie) : undefined,
     sound: sound ? await sendFile("/api/v1/sounds", sound) : undefined,
diff --git a/application/client/src/hooks/use_fetch.ts b/application/client/src/hooks/use_fetch.ts
index 36039ed35d..72a6400d10 100644
--- a/application/client/src/hooks/use_fetch.ts
+++ b/application/client/src/hooks/use_fetch.ts
@@ -17,6 +17,15 @@ export function useFetch<T>(
   });
 
   useEffect(() => {
+    if (!apiPath) {
+      setResult(() => ({
+        data: null,
+        error: null,
+        isLoading: false,
+      }));
+      return;
+    }
+
     setResult(() => ({
       data: null,
       error: null,
diff --git a/application/client/src/hooks/use_visibility.ts b/application/client/src/hooks/use_visibility.ts
new file mode 100644
index 0000000000..dc5a34d9fe
--- /dev/null
+++ b/application/client/src/hooks/use_visibility.ts
@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+
+interface Options {
+  rootMargin?: string;
+}
+
+export function useVisibility({ rootMargin = "200px 0px" }: Options = {}) {
+  const ref = useRef<HTMLElement | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (element == null || isVisible) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setIsVisible(true);
+        }
+      },
+      { rootMargin },
+    );
+
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [isVisible, rootMargin]);
+
+  return { isVisible, ref };
+}
diff --git a/application/client/src/utils/convert_image.ts b/application/client/src/utils/convert_image.ts
index 9fce086d9c..8535fe035c 100644
--- a/application/client/src/utils/convert_image.ts
+++ b/application/client/src/utils/convert_image.ts
@@ -6,7 +6,12 @@ interface Options {
   extension: MagickFormat;
 }
 
-export async function convertImage(file: File, options: Options): Promise<Blob> {
+interface ConvertedImage {
+  alt: string;
+  blob: Blob;
+}
+
+export async function convertImage(file: File, options: Options): Promise<ConvertedImage> {
   await initializeImageMagick(magickWasm);
 
   const byteArray = new Uint8Array(await file.arrayBuffer());
@@ -19,7 +24,10 @@ export async function convertImage(file: File, options: Options): Promise<Blob>
 
       img.write((output) => {
         if (comment == null) {
-          resolve(new Blob([output as Uint8Array<ArrayBuffer>]));
+          resolve({
+            alt: "",
+            blob: new Blob([output as Uint8Array<ArrayBuffer>]),
+          });
           return;
         }
 
@@ -35,7 +43,10 @@ export async function convertImage(file: File, options: Options): Promise<Blob>
         const exifStr = dump({ "0th": { [ImageIFD.ImageDescription]: descriptionBinary } });
         const outputWithExif = insert(exifStr, binary);
         const bytes = Uint8Array.from(outputWithExif.split("").map((c) => c.charCodeAt(0)));
-        resolve(new Blob([bytes]));
+        resolve({
+          alt: comment,
+          blob: new Blob([bytes]),
+        });
       });
     });
   });
diff --git a/application/client/src/utils/fetchers.ts b/application/client/src/utils/fetchers.ts
index 4803af6a5a..ff90c0bb06 100644
--- a/application/client/src/utils/fetchers.ts
+++ b/application/client/src/utils/fetchers.ts
@@ -75,12 +75,17 @@ export async function fetchJSON<T>(url: string): Promise<T> {
   return parseJSONResponse<T>(response);
 }
 
-export async function sendFile<T>(url: string, file: File): Promise<T> {
+export async function sendFile<T>(
+  url: string,
+  file: File,
+  headers?: Record<string, string>,
+): Promise<T> {
   const response = await fetch(url, {
     body: file,
     credentials: "same-origin",
     headers: {
       "Content-Type": "application/octet-stream",
+      ...headers,
     },
     method: "POST",
   });
diff --git a/application/server/src/routes/api/image.ts b/application/server/src/routes/api/image.ts
index d5c23e209d..97df1e5db2 100644
--- a/application/server/src/routes/api/image.ts
+++ b/application/server/src/routes/api/image.ts
@@ -27,10 +27,13 @@ imageRouter.post("/images", async (req, res) => {
   }
 
   const imageId = uuidv4();
+  const imageAltHeader = req.get("X-Image-Alt");
+  const alt =
+    imageAltHeader != null ? decodeURIComponent(imageAltHeader).slice(0, 1024) : "";
 
   const filePath = path.resolve(UPLOAD_PATH, `./images/${imageId}.${EXTENSION}`);
   await fs.mkdir(path.resolve(UPLOAD_PATH, "images"), { recursive: true });
   await fs.writeFile(filePath, req.body);
 
-  return res.status(200).type("application/json").send({ id: imageId });
+  return res.status(200).type("application/json").send({ alt, id: imageId });
 });

From 8f9df3df507aa4934c65af5f3231ef12ebcc1045 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 02:46:51 +0900
Subject: [PATCH 06/21] Delay auth and audio work on landing

---
 .../src/components/foundation/SoundPlayer.tsx | 62 +++++++------------
 .../client/src/containers/AppContainer.tsx    | 43 +++++++++----
 application/client/src/index.css              | 16 -----
 3 files changed, 53 insertions(+), 68 deletions(-)

diff --git a/application/client/src/components/foundation/SoundPlayer.tsx b/application/client/src/components/foundation/SoundPlayer.tsx
index dfa576f035..d92991561b 100644
--- a/application/client/src/components/foundation/SoundPlayer.tsx
+++ b/application/client/src/components/foundation/SoundPlayer.tsx
@@ -1,10 +1,8 @@
-import { ReactEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ReactEventHandler, useCallback, useRef, useState } from "react";
 
 import { AspectRatioBox } from "@web-speed-hackathon-2026/client/src/components/foundation/AspectRatioBox";
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { SoundWaveSVG } from "@web-speed-hackathon-2026/client/src/components/foundation/SoundWaveSVG";
-import { useFetch } from "@web-speed-hackathon-2026/client/src/hooks/use_fetch";
-import { useVisibility } from "@web-speed-hackathon-2026/client/src/hooks/use_visibility";
 import { fetchBinary } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 import { getSoundPath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
@@ -13,19 +11,7 @@ interface Props {
 }
 
 export const SoundPlayer = ({ sound }: Props) => {
-  const { isVisible, ref } = useVisibility();
-  const [shouldLoad, setShouldLoad] = useState(false);
-  useEffect(() => {
-    if (isVisible) {
-      setShouldLoad(true);
-    }
-  }, [isVisible]);
-
-  const { data, isLoading } = useFetch(shouldLoad ? getSoundPath(sound.id) : "", fetchBinary);
-
-  const blobUrl = useMemo(() => {
-    return data !== null ? URL.createObjectURL(new Blob([data])) : null;
-  }, [data]);
+  const [waveformData, setWaveformData] = useState<ArrayBuffer | null>(null);
 
   const [currentTimeRatio, setCurrentTimeRatio] = useState(0);
   const handleTimeUpdate = useCallback<ReactEventHandler<HTMLAudioElement>>((ev) => {
@@ -34,40 +20,34 @@ export const SoundPlayer = ({ sound }: Props) => {
   }, []);
 
   const audioRef = useRef<HTMLAudioElement>(null);
-  const pendingPlayRef = useRef(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const handleTogglePlaying = useCallback(() => {
-    if (blobUrl === null) {
-      pendingPlayRef.current = true;
-      setShouldLoad(true);
-      return;
-    }
-
     setIsPlaying((isPlaying) => {
       if (isPlaying) {
         audioRef.current?.pause();
       } else {
-        audioRef.current?.play();
+        void audioRef.current?.play();
+        if (waveformData === null) {
+          void fetchBinary(getSoundPath(sound.id))
+            .then((data) => {
+              setWaveformData(data);
+            })
+            .catch(() => {});
+        }
       }
       return !isPlaying;
     });
-  }, [blobUrl]);
-
-  useEffect(() => {
-    if (!pendingPlayRef.current || blobUrl === null) {
-      return;
-    }
-
-    pendingPlayRef.current = false;
-    void audioRef.current?.play();
-    setIsPlaying(true);
-  }, [blobUrl]);
+  }, [sound.id, waveformData]);
 
   return (
-    <div ref={ref as React.Ref<HTMLDivElement>} className="bg-cax-surface-subtle flex h-full w-full items-center justify-center">
-      {blobUrl !== null ? (
-        <audio ref={audioRef} loop={true} onTimeUpdate={handleTimeUpdate} src={blobUrl} />
-      ) : null}
+    <div className="bg-cax-surface-subtle flex h-full w-full items-center justify-center">
+      <audio
+        ref={audioRef}
+        loop={true}
+        onTimeUpdate={handleTimeUpdate}
+        preload="none"
+        src={getSoundPath(sound.id)}
+      />
       <div className="p-2">
         <button
           className="bg-cax-accent text-cax-surface-raised flex h-8 w-8 items-center justify-center rounded-full text-sm hover:opacity-75"
@@ -88,8 +68,8 @@ export const SoundPlayer = ({ sound }: Props) => {
           <AspectRatioBox aspectHeight={1} aspectWidth={10}>
             <div className="relative h-full w-full">
               <div className="absolute inset-0 h-full w-full">
-                {data !== null && !isLoading ? (
-                  <SoundWaveSVG soundData={data} />
+                {waveformData !== null ? (
+                  <SoundWaveSVG soundData={waveformData} />
                 ) : (
                   <div className="bg-cax-border/30 h-full w-full rounded-sm" />
                 )}
diff --git a/application/client/src/containers/AppContainer.tsx b/application/client/src/containers/AppContainer.tsx
index a43076fe93..b79205fcfd 100644
--- a/application/client/src/containers/AppContainer.tsx
+++ b/application/client/src/containers/AppContainer.tsx
@@ -30,17 +30,38 @@ export const AppContainer = () => {
   const [activeUser, setActiveUser] = useState<Models.User | null>(null);
   const [isLoadingActiveUser, setIsLoadingActiveUser] = useState(true);
   useEffect(() => {
-    void fetchJSON<Models.User>("/api/v1/me")
-      .then((user) => {
-        setActiveUser(user);
-      })
-      .catch(() => {
-        setActiveUser(null);
-      })
-      .finally(() => {
-        setIsLoadingActiveUser(false);
-      });
-  }, [setActiveUser, setIsLoadingActiveUser]);
+    const shouldPrioritizeAuth = pathname.startsWith("/dm") || pathname === "/crok";
+
+    const loadActiveUser = () => {
+      void fetchJSON<Models.User>("/api/v1/me")
+        .then((user) => {
+          setActiveUser(user);
+        })
+        .catch(() => {
+          setActiveUser(null);
+        })
+        .finally(() => {
+          setIsLoadingActiveUser(false);
+        });
+    };
+
+    if (shouldPrioritizeAuth) {
+      loadActiveUser();
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      if ("requestIdleCallback" in window) {
+        window.requestIdleCallback(loadActiveUser, { timeout: 3000 });
+      } else {
+        loadActiveUser();
+      }
+    }, 1000);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [pathname, setActiveUser, setIsLoadingActiveUser]);
   const handleLogout = useCallback(async () => {
     await sendJSON("/api/v1/signout", {});
     setActiveUser(null);
diff --git a/application/client/src/index.css b/application/client/src/index.css
index 0d85ef194a..e8f81495da 100644
--- a/application/client/src/index.css
+++ b/application/client/src/index.css
@@ -4,22 +4,6 @@
 @import "tailwindcss";
 @source "./**/*.{ts,tsx,html}";
 
-@font-face {
-  /* Source Han Serif JP Regular の Y 軸を 1/1.43 に縮小した改変フォント */
-  font-family: "Rei no Are Mincho";
-  font-display: block;
-  src: url(/fonts/ReiNoAreMincho-Regular.otf) format("opentype");
-  font-weight: normal;
-}
-
-@font-face {
-  /* Source Han Serif JP Heavy の Y 軸を 1/1.43 に縮小した改変フォント */
-  font-family: "Rei no Are Mincho";
-  font-display: block;
-  src: url(/fonts/ReiNoAreMincho-Heavy.otf) format("opentype");
-  font-weight: bold;
-}
-
 .font-awesome {
   height: 1em;
   vertical-align: -0.125em;

From bff58608b7666c96007ab2742cef200907339641 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 03:07:54 +0900
Subject: [PATCH 07/21] Prioritize first-view content and trim DM payloads

---
 .../client/src/components/post/PostItem.tsx   | 15 ++--
 .../src/components/timeline/Timeline.tsx      |  4 +-
 .../src/components/timeline/TimelineItem.tsx  |  8 +-
 .../client/src/containers/PostContainer.tsx   | 27 ++++++
 .../client/src/containers/SearchContainer.tsx |  1 +
 .../src/containers/TimelineContainer.tsx      |  1 +
 .../src/containers/UserProfileContainer.tsx   |  1 +
 .../client/src/hooks/use_infinite_fetch.ts    | 20 +++--
 .../server/src/models/DirectMessage.ts        |  5 +-
 application/server/src/models/Post.ts         |  2 +-
 .../server/src/routes/api/direct_message.ts   | 83 +++++++++++++++----
 11 files changed, 133 insertions(+), 34 deletions(-)

diff --git a/application/client/src/components/post/PostItem.tsx b/application/client/src/components/post/PostItem.tsx
index cd515107ca..5cdfa98d68 100644
--- a/application/client/src/components/post/PostItem.tsx
+++ b/application/client/src/components/post/PostItem.tsx
@@ -23,11 +23,16 @@ export const PostItem = ({ post }: Props) => {
               className="border-cax-border bg-cax-surface-subtle block h-14 w-14 overflow-hidden rounded-full border hover:opacity-95 sm:h-16 sm:w-16"
               to={`/users/${post.user.username}`}
             >
-              <img
-                alt={post.user.profileImage.alt}
-                src={getProfileImagePath(post.user.profileImage.id)}
-              />
-            </Link>
+            <img
+              alt={post.user.profileImage.alt}
+              decoding="async"
+              fetchPriority="high"
+              height="64"
+              loading="eager"
+              src={getProfileImagePath(post.user.profileImage.id)}
+              width="64"
+            />
+          </Link>
           </div>
           <div className="min-w-0 shrink grow overflow-hidden text-ellipsis whitespace-nowrap">
             <p>
diff --git a/application/client/src/components/timeline/Timeline.tsx b/application/client/src/components/timeline/Timeline.tsx
index 752a4d973b..8540ca6034 100644
--- a/application/client/src/components/timeline/Timeline.tsx
+++ b/application/client/src/components/timeline/Timeline.tsx
@@ -7,8 +7,8 @@ interface Props {
 export const Timeline = ({ timeline }: Props) => {
   return (
     <section>
-      {timeline.map((post) => {
-        return <TimelineItem key={post.id} post={post} />;
+      {timeline.map((post, index) => {
+        return <TimelineItem key={post.id} post={post} priority={index < 2} />;
       })}
     </section>
   );
diff --git a/application/client/src/components/timeline/TimelineItem.tsx b/application/client/src/components/timeline/TimelineItem.tsx
index 16df0f8ed4..f87de5b280 100644
--- a/application/client/src/components/timeline/TimelineItem.tsx
+++ b/application/client/src/components/timeline/TimelineItem.tsx
@@ -31,9 +31,10 @@ const isClickedAnchorOrButton = (target: EventTarget | null, currentTarget: Elem
  */
 interface Props {
   post: Models.Post;
+  priority?: boolean;
 }
 
-export const TimelineItem = ({ post }: Props) => {
+export const TimelineItem = ({ post, priority = false }: Props) => {
   const navigate = useNavigate();
 
   /**
@@ -64,8 +65,9 @@ export const TimelineItem = ({ post }: Props) => {
             <img
               alt={post.user.profileImage.alt}
               decoding="async"
+              fetchPriority={priority ? "high" : "auto"}
               height="64"
-              loading="lazy"
+              loading={priority ? "eager" : "lazy"}
               src={getProfileImagePath(post.user.profileImage.id)}
               width="64"
             />
@@ -95,7 +97,7 @@ export const TimelineItem = ({ post }: Props) => {
           </div>
           {post.images?.length > 0 ? (
             <div className="relative mt-2 w-full">
-              <ImageArea images={post.images} />
+              <ImageArea images={post.images} priority={priority} />
             </div>
           ) : null}
           {post.movie ? (
diff --git a/application/client/src/containers/PostContainer.tsx b/application/client/src/containers/PostContainer.tsx
index 2182c24729..53bb60de72 100644
--- a/application/client/src/containers/PostContainer.tsx
+++ b/application/client/src/containers/PostContainer.tsx
@@ -1,4 +1,5 @@
 import { Helmet } from "react-helmet";
+import { useEffect, useState } from "react";
 import { useParams } from "react-router";
 
 import { InfiniteScroll } from "@web-speed-hackathon-2026/client/src/components/foundation/InfiniteScroll";
@@ -14,9 +15,35 @@ const PostContainerContent = ({ postId }: { postId: string | undefined }) => {
     fetchJSON,
   );
 
+  const [shouldLoadComments, setShouldLoadComments] = useState(false);
+
+  useEffect(() => {
+    if (isLoadingPost || post == null) {
+      setShouldLoadComments(false);
+      return;
+    }
+
+    const loadComments = () => {
+      setShouldLoadComments(true);
+    };
+
+    if ("requestIdleCallback" in window) {
+      const idleId = window.requestIdleCallback(loadComments, { timeout: 1500 });
+      return () => {
+        window.cancelIdleCallback(idleId);
+      };
+    }
+
+    const timeoutId = globalThis.setTimeout(loadComments, 300);
+    return () => {
+      globalThis.clearTimeout(timeoutId);
+    };
+  }, [isLoadingPost, post]);
+
   const { data: comments, fetchMore, hasMore } = useInfiniteFetch<Models.Comment>(
     `/api/v1/posts/${postId}/comments`,
     fetchJSON,
+    { enabled: shouldLoadComments, limit: 4 },
   );
 
   if (isLoadingPost) {
diff --git a/application/client/src/containers/SearchContainer.tsx b/application/client/src/containers/SearchContainer.tsx
index f572f7da67..c3c67ed34e 100644
--- a/application/client/src/containers/SearchContainer.tsx
+++ b/application/client/src/containers/SearchContainer.tsx
@@ -13,6 +13,7 @@ export const SearchContainer = () => {
   const { data: posts, fetchMore, hasMore } = useInfiniteFetch<Models.Post>(
     query ? `/api/v1/search?q=${encodeURIComponent(query)}` : "",
     fetchJSON,
+    { limit: 8 },
   );
 
   return (
diff --git a/application/client/src/containers/TimelineContainer.tsx b/application/client/src/containers/TimelineContainer.tsx
index 55cd4099a8..227863960e 100644
--- a/application/client/src/containers/TimelineContainer.tsx
+++ b/application/client/src/containers/TimelineContainer.tsx
@@ -9,6 +9,7 @@ export const TimelineContainer = () => {
   const { data: posts, fetchMore, hasMore } = useInfiniteFetch<Models.Post>(
     "/api/v1/posts",
     fetchJSON,
+    { limit: 6 },
   );
 
   return (
diff --git a/application/client/src/containers/UserProfileContainer.tsx b/application/client/src/containers/UserProfileContainer.tsx
index 3d44432e46..31838ab769 100644
--- a/application/client/src/containers/UserProfileContainer.tsx
+++ b/application/client/src/containers/UserProfileContainer.tsx
@@ -18,6 +18,7 @@ export const UserProfileContainer = () => {
   const { data: posts, fetchMore, hasMore } = useInfiniteFetch<Models.Post>(
     `/api/v1/users/${username}/posts`,
     fetchJSON,
+    { limit: 8 },
   );
 
   if (isLoadingUser) {
diff --git a/application/client/src/hooks/use_infinite_fetch.ts b/application/client/src/hooks/use_infinite_fetch.ts
index e7e4a8615b..eb7725e297 100644
--- a/application/client/src/hooks/use_infinite_fetch.ts
+++ b/application/client/src/hooks/use_infinite_fetch.ts
@@ -1,6 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
-const LIMIT = 12;
+const DEFAULT_LIMIT = 12;
+
+interface Options {
+  enabled?: boolean;
+  limit?: number;
+}
 
 interface ReturnValues<T> {
   data: Array<T>;
@@ -13,6 +18,7 @@ interface ReturnValues<T> {
 export function useInfiniteFetch<T>(
   apiPath: string,
   fetcher: (apiPath: string) => Promise<T[]>,
+  { enabled = true, limit = DEFAULT_LIMIT }: Options = {},
 ): ReturnValues<T> {
   const internalRef = useRef({ hasMore: true, isLoading: false, offset: 0 });
 
@@ -25,7 +31,7 @@ export function useInfiniteFetch<T>(
 
   const fetchMore = useCallback(() => {
     const { hasMore, isLoading, offset } = internalRef.current;
-    if (!apiPath || isLoading || !hasMore) {
+    if (!apiPath || !enabled || isLoading || !hasMore) {
       return;
     }
 
@@ -40,12 +46,12 @@ export function useInfiniteFetch<T>(
     };
 
     const requestUrl = new URL(apiPath, window.location.origin);
-    requestUrl.searchParams.set("limit", String(LIMIT));
+    requestUrl.searchParams.set("limit", String(limit));
     requestUrl.searchParams.set("offset", String(offset));
 
     void fetcher(`${requestUrl.pathname}${requestUrl.search}`).then(
       (pageData) => {
-        const nextHasMore = pageData.length === LIMIT;
+        const nextHasMore = pageData.length === limit;
         setResult((cur) => ({
           ...cur,
           data: [...cur.data, ...pageData],
@@ -71,10 +77,10 @@ export function useInfiniteFetch<T>(
         };
       },
     );
-  }, [apiPath, fetcher]);
+  }, [apiPath, enabled, fetcher, limit]);
 
   useEffect(() => {
-    if (!apiPath) {
+    if (!apiPath || !enabled) {
       setResult(() => ({
         data: [],
         error: null,
@@ -102,7 +108,7 @@ export function useInfiniteFetch<T>(
     };
 
     fetchMore();
-  }, [fetchMore]);
+  }, [apiPath, enabled, fetchMore]);
 
   return {
     ...result,
diff --git a/application/server/src/models/DirectMessage.ts b/application/server/src/models/DirectMessage.ts
index b2dc27fb8c..b16f226020 100644
--- a/application/server/src/models/DirectMessage.ts
+++ b/application/server/src/models/DirectMessage.ts
@@ -74,7 +74,10 @@ export function initDirectMessage(sequelize: Sequelize) {
   );
 
   DirectMessage.addHook("afterSave", "onDmSaved", async (message) => {
-    const directMessage = await DirectMessage.findByPk(message.get().id);
+    const directMessage = await DirectMessage.unscoped().findByPk(message.get().id, {
+      attributes: ["body", "conversationId", "createdAt", "id", "isRead", "senderId"],
+      include: [{ association: "sender", attributes: ["id"] }],
+    });
     const conversation = await DirectMessageConversation.findByPk(directMessage?.conversationId);
 
     if (directMessage == null || conversation == null) {
diff --git a/application/server/src/models/Post.ts b/application/server/src/models/Post.ts
index a28477361f..d7d401ed18 100644
--- a/application/server/src/models/Post.ts
+++ b/application/server/src/models/Post.ts
@@ -49,7 +49,7 @@ export function initPost(sequelize: Sequelize) {
         include: [
           {
             association: "user",
-            attributes: ["createdAt", "description", "id", "name", "username"],
+            attributes: ["id", "name", "username"],
             include: [{ association: "profileImage", attributes: ["alt", "id"] }],
           },
           {
diff --git a/application/server/src/routes/api/direct_message.ts b/application/server/src/routes/api/direct_message.ts
index 2993a2d6be..e2db0307e8 100644
--- a/application/server/src/routes/api/direct_message.ts
+++ b/application/server/src/routes/api/direct_message.ts
@@ -1,6 +1,6 @@
 import { Router } from "express";
 import httpErrors from "http-errors";
-import { col, where, Op } from "sequelize";
+import { Op } from "sequelize";
 
 import { eventhub } from "@web-speed-hackathon-2026/server/src/eventhub";
 import {
@@ -11,25 +11,78 @@ import {
 
 export const directMessageRouter = Router();
 
+const conversationListInclude = [
+  {
+    association: "initiator",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "member",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "messages",
+    attributes: ["body", "createdAt", "id", "isRead"],
+    include: [{ association: "sender", attributes: ["id"] }],
+    required: true,
+  },
+];
+
+const conversationDetailInclude = [
+  {
+    association: "initiator",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "member",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "messages",
+    attributes: ["body", "createdAt", "id", "isRead"],
+    include: [{ association: "sender", attributes: ["id"] }],
+    required: false,
+  },
+];
+
 directMessageRouter.get("/dm", async (req, res) => {
   if (req.session.userId === undefined) {
     throw new httpErrors.Unauthorized();
   }
 
-  const conversations = await DirectMessageConversation.findAll({
+  const conversations = await DirectMessageConversation.unscoped().findAll({
+    attributes: ["id"],
+    include: conversationListInclude,
     where: {
-      [Op.and]: [
-        { [Op.or]: [{ initiatorId: req.session.userId }, { memberId: req.session.userId }] },
-        where(col("messages.id"), { [Op.not]: null }),
-      ],
+      [Op.or]: [{ initiatorId: req.session.userId }, { memberId: req.session.userId }],
     },
-    order: [[col("messages.createdAt"), "DESC"]],
   });
 
-  const sorted = conversations.map((c) => ({
-    ...c.toJSON(),
-    messages: c.messages?.reverse(),
-  }));
+  const sorted = conversations
+    .map((conversation) => {
+      const json = conversation.toJSON();
+      const messages = [...(json.messages ?? [])].sort((a, b) => {
+        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      });
+
+      return {
+        ...json,
+        messages,
+      };
+    })
+    .sort((a, b) => {
+      const aLast = a.messages.at(-1);
+      const bLast = b.messages.at(-1);
+      if (aLast == null || bLast == null) {
+        return 0;
+      }
+
+      return new Date(bLast.createdAt).getTime() - new Date(aLast.createdAt).getTime();
+    });
 
   return res.status(200).type("application/json").send(sorted);
 });
@@ -56,9 +109,8 @@ directMessageRouter.post("/dm", async (req, res) => {
       memberId: peer.id,
     },
   });
-  await conversation.reload();
 
-  return res.status(200).type("application/json").send(conversation);
+  return res.status(200).type("application/json").send({ id: conversation.id });
 });
 
 directMessageRouter.ws("/dm/unread", async (req, _res) => {
@@ -100,7 +152,9 @@ directMessageRouter.get("/dm/:conversationId", async (req, res) => {
     throw new httpErrors.Unauthorized();
   }
 
-  const conversation = await DirectMessageConversation.findOne({
+  const conversation = await DirectMessageConversation.unscoped().findOne({
+    attributes: ["id"],
+    include: conversationDetailInclude,
     where: {
       id: req.params.conversationId,
       [Op.or]: [{ initiatorId: req.session.userId }, { memberId: req.session.userId }],
@@ -175,7 +229,6 @@ directMessageRouter.post("/dm/:conversationId/messages", async (req, res) => {
     conversationId: conversation.id,
     senderId: req.session.userId,
   });
-  await message.reload();
 
   return res.status(201).type("application/json").send(message);
 });

From 297585d2e0b63b8561b922a235c71c8314bd9e22 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 08:33:09 +0900
Subject: [PATCH 08/21] Prevent stale auth fetch from overwriting sign-in

---
 .../client/src/containers/AppContainer.tsx    | 43 ++++++++++++++++---
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/application/client/src/containers/AppContainer.tsx b/application/client/src/containers/AppContainer.tsx
index b79205fcfd..663a09e7b7 100644
--- a/application/client/src/containers/AppContainer.tsx
+++ b/application/client/src/containers/AppContainer.tsx
@@ -1,4 +1,4 @@
-import { Suspense, lazy, useCallback, useEffect, useId, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useId, useRef, useState } from "react";
 import { HelmetProvider } from "react-helmet";
 import { Route, Routes, useLocation, useNavigate } from "react-router";
 
@@ -29,44 +29,73 @@ export const AppContainer = () => {
 
   const [activeUser, setActiveUser] = useState<Models.User | null>(null);
   const [isLoadingActiveUser, setIsLoadingActiveUser] = useState(true);
+  const activeUserRequestIdRef = useRef(0);
+
+  const applyActiveUser = useCallback((user: Models.User | null) => {
+    activeUserRequestIdRef.current += 1;
+    setActiveUser(user);
+    setIsLoadingActiveUser(false);
+  }, []);
+
   useEffect(() => {
     const shouldPrioritizeAuth = pathname.startsWith("/dm") || pathname === "/crok";
+    let cancelled = false;
+
+    const requestId = activeUserRequestIdRef.current + 1;
+    activeUserRequestIdRef.current = requestId;
 
     const loadActiveUser = () => {
       void fetchJSON<Models.User>("/api/v1/me")
         .then((user) => {
+          if (cancelled || activeUserRequestIdRef.current !== requestId) {
+            return;
+          }
           setActiveUser(user);
         })
         .catch(() => {
+          if (cancelled || activeUserRequestIdRef.current !== requestId) {
+            return;
+          }
           setActiveUser(null);
         })
         .finally(() => {
+          if (cancelled || activeUserRequestIdRef.current !== requestId) {
+            return;
+          }
           setIsLoadingActiveUser(false);
         });
     };
 
     if (shouldPrioritizeAuth) {
+      setIsLoadingActiveUser(true);
       loadActiveUser();
-      return;
+      return () => {
+        cancelled = true;
+      };
     }
 
+    let idleCallbackId: number | null = null;
     const timeoutId = window.setTimeout(() => {
       if ("requestIdleCallback" in window) {
-        window.requestIdleCallback(loadActiveUser, { timeout: 3000 });
+        idleCallbackId = window.requestIdleCallback(loadActiveUser, { timeout: 3000 });
       } else {
         loadActiveUser();
       }
     }, 1000);
 
     return () => {
+      cancelled = true;
       window.clearTimeout(timeoutId);
+      if (idleCallbackId !== null && "cancelIdleCallback" in window) {
+        window.cancelIdleCallback(idleCallbackId);
+      }
     };
-  }, [pathname, setActiveUser, setIsLoadingActiveUser]);
+  }, [pathname]);
   const handleLogout = useCallback(async () => {
     await sendJSON("/api/v1/signout", {});
-    setActiveUser(null);
+    applyActiveUser(null);
     navigate("/");
-  }, [navigate]);
+  }, [applyActiveUser, navigate]);
 
   const authModalId = useId();
   const newPostModalId = useId();
@@ -115,7 +144,7 @@ export const AppContainer = () => {
         </Routes>
       </AppPage>
 
-      <AuthModalContainer id={authModalId} onUpdateActiveUser={setActiveUser} />
+      <AuthModalContainer id={authModalId} onUpdateActiveUser={applyActiveUser} />
       <NewPostModalContainer id={newPostModalId} />
     </HelmetProvider>
   );

From 4c4ed87518c1b0b8d64174521857ba1bdac844ec Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 08:42:35 +0900
Subject: [PATCH 09/21] Bootstrap critical data for key pages

---
 application/client/src/buildinfo.ts           |   1 +
 .../client/src/components/crok/ChatInput.tsx  |  42 ++-
 .../client/src/containers/AppContainer.tsx    |   8 +
 application/client/src/hooks/use_fetch.ts     |  12 +
 .../client/src/hooks/use_infinite_fetch.ts    |  39 ++-
 .../client/src/utils/bootstrap_data.ts        |  19 ++
 application/server/src/routes/static.ts       |  18 +-
 .../server/src/utils/render_app_html.ts       | 302 ++++++++++++++++++
 8 files changed, 425 insertions(+), 16 deletions(-)
 create mode 100644 application/client/src/utils/bootstrap_data.ts
 create mode 100644 application/server/src/utils/render_app_html.ts

diff --git a/application/client/src/buildinfo.ts b/application/client/src/buildinfo.ts
index 48b5dbef9b..6302960b67 100644
--- a/application/client/src/buildinfo.ts
+++ b/application/client/src/buildinfo.ts
@@ -3,6 +3,7 @@ declare global {
     BUILD_DATE: string | undefined;
     COMMIT_HASH: string | undefined;
   };
+  var __BOOTSTRAP_DATA__: Record<string, unknown> | undefined;
 }
 
 /** @note 競技用サーバーで参照します。可能な限りコード内に含めてください */
diff --git a/application/client/src/components/crok/ChatInput.tsx b/application/client/src/components/crok/ChatInput.tsx
index 6f8c17796b..6e4865528f 100644
--- a/application/client/src/components/crok/ChatInput.tsx
+++ b/application/client/src/components/crok/ChatInput.tsx
@@ -80,10 +80,12 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const suggestionsRef = useRef<HTMLDivElement>(null);
   const [tokenizer, setTokenizer] = useState<Tokenizer<IpadicFeatures> | null>(null);
+  const [shouldInitTokenizer, setShouldInitTokenizer] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const [queryTokens, setQueryTokens] = useState<string[]>([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
+  const trimmedInputValue = inputValue.trim();
 
   // サジェストが更新されたら一番下にスクロール
   useLayoutEffect(() => {
@@ -92,8 +94,30 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
     }
   }, [suggestions, showSuggestions]);
 
-  // 初回にkuromojiトークナイザーを構築
   useEffect(() => {
+    const enableTokenizer = () => {
+      setShouldInitTokenizer(true);
+    };
+
+    if ("requestIdleCallback" in window) {
+      const idleId = window.requestIdleCallback(enableTokenizer, { timeout: 2000 });
+      return () => {
+        window.cancelIdleCallback(idleId);
+      };
+    }
+
+    const timeoutId = globalThis.setTimeout(enableTokenizer, 300);
+    return () => {
+      globalThis.clearTimeout(timeoutId);
+    };
+  }, []);
+
+  // 初回の入力導線を邪魔しないよう、形態素解析器は idle 後に構築する
+  useEffect(() => {
+    if (!shouldInitTokenizer || tokenizer !== null) {
+      return;
+    }
+
     let mounted = true;
 
     const init = async () => {
@@ -108,13 +132,12 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
     return () => {
       mounted = false;
     };
-  }, []);
+  }, [shouldInitTokenizer, tokenizer]);
 
   useEffect(() => {
     let cancelled = false;
-
     const updateSuggestions = async () => {
-      if (!tokenizer || !inputValue.trim()) {
+      if (!tokenizer || trimmedInputValue.length < 2) {
         setSuggestions([]);
         setQueryTokens([]);
         setShowSuggestions(false);
@@ -140,12 +163,15 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
       setShowSuggestions(results.length > 0);
     };
 
-    void updateSuggestions();
+    const timeoutId = window.setTimeout(() => {
+      void updateSuggestions();
+    }, 200);
 
     return () => {
       cancelled = true;
+      window.clearTimeout(timeoutId);
     };
-  }, [inputValue, tokenizer]);
+  }, [inputValue, tokenizer, trimmedInputValue]);
 
   const adjustTextareaHeight = () => {
     const textarea = textareaRef.current;
@@ -163,6 +189,9 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
 
   const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
+    if (!shouldInitTokenizer) {
+      setShouldInitTokenizer(true);
+    }
     setInputValue(value);
     adjustTextareaHeight();
   };
@@ -220,6 +249,7 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
             ref={textareaRef}
             className="text-cax-text placeholder-cax-text-subtle max-h-[200px] min-h-[52px] flex-1 resize-none overflow-y-auto bg-transparent py-3 pr-2 pl-4 focus:outline-none"
             onChange={handleInputChange}
+            onFocus={() => setShouldInitTokenizer(true)}
             onKeyDown={handleKeyDown}
             placeholder="メッセージを入力..."
             lang="ja"
diff --git a/application/client/src/containers/AppContainer.tsx b/application/client/src/containers/AppContainer.tsx
index 663a09e7b7..978480f32f 100644
--- a/application/client/src/containers/AppContainer.tsx
+++ b/application/client/src/containers/AppContainer.tsx
@@ -13,6 +13,7 @@ import { SearchContainer } from "@web-speed-hackathon-2026/client/src/containers
 import { TermContainer } from "@web-speed-hackathon-2026/client/src/containers/TermContainer";
 import { TimelineContainer } from "@web-speed-hackathon-2026/client/src/containers/TimelineContainer";
 import { UserProfileContainer } from "@web-speed-hackathon-2026/client/src/containers/UserProfileContainer";
+import { consumeBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
 import { fetchJSON, sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
 const LazyCrokContainer = lazy(async () => {
@@ -45,6 +46,13 @@ export const AppContainer = () => {
     activeUserRequestIdRef.current = requestId;
 
     const loadActiveUser = () => {
+      const bootstrapUser = consumeBootstrapData<Models.User>("/api/v1/me");
+      if (bootstrapUser !== null) {
+        setActiveUser(bootstrapUser);
+        setIsLoadingActiveUser(false);
+        return;
+      }
+
       void fetchJSON<Models.User>("/api/v1/me")
         .then((user) => {
           if (cancelled || activeUserRequestIdRef.current !== requestId) {
diff --git a/application/client/src/hooks/use_fetch.ts b/application/client/src/hooks/use_fetch.ts
index 72a6400d10..bcdf5e544f 100644
--- a/application/client/src/hooks/use_fetch.ts
+++ b/application/client/src/hooks/use_fetch.ts
@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 
+import { consumeBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
+
 interface ReturnValues<T> {
   data: T | null;
   error: Error | null;
@@ -32,6 +34,16 @@ export function useFetch<T>(
       isLoading: true,
     }));
 
+    const bootstrapData = consumeBootstrapData<T>(apiPath);
+    if (bootstrapData !== null) {
+      setResult(() => ({
+        data: bootstrapData,
+        error: null,
+        isLoading: false,
+      }));
+      return;
+    }
+
     void fetcher(apiPath).then(
       (data) => {
         setResult((cur) => ({
diff --git a/application/client/src/hooks/use_infinite_fetch.ts b/application/client/src/hooks/use_infinite_fetch.ts
index eb7725e297..d284ca281a 100644
--- a/application/client/src/hooks/use_infinite_fetch.ts
+++ b/application/client/src/hooks/use_infinite_fetch.ts
@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import { consumeBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
+
 const DEFAULT_LIMIT = 12;
 
 interface Options {
@@ -29,6 +31,16 @@ export function useInfiniteFetch<T>(
     isLoading: true,
   });
 
+  const buildRequestPath = useCallback(
+    (offset: number) => {
+      const requestUrl = new URL(apiPath, window.location.origin);
+      requestUrl.searchParams.set("limit", String(limit));
+      requestUrl.searchParams.set("offset", String(offset));
+      return `${requestUrl.pathname}${requestUrl.search}`;
+    },
+    [apiPath, limit],
+  );
+
   const fetchMore = useCallback(() => {
     const { hasMore, isLoading, offset } = internalRef.current;
     if (!apiPath || !enabled || isLoading || !hasMore) {
@@ -45,11 +57,9 @@ export function useInfiniteFetch<T>(
       offset,
     };
 
-    const requestUrl = new URL(apiPath, window.location.origin);
-    requestUrl.searchParams.set("limit", String(limit));
-    requestUrl.searchParams.set("offset", String(offset));
+    const requestPath = buildRequestPath(offset);
 
-    void fetcher(`${requestUrl.pathname}${requestUrl.search}`).then(
+    void fetcher(requestPath).then(
       (pageData) => {
         const nextHasMore = pageData.length === limit;
         setResult((cur) => ({
@@ -77,7 +87,7 @@ export function useInfiniteFetch<T>(
         };
       },
     );
-  }, [apiPath, enabled, fetcher, limit]);
+  }, [apiPath, buildRequestPath, enabled, fetcher, limit]);
 
   useEffect(() => {
     if (!apiPath || !enabled) {
@@ -107,8 +117,25 @@ export function useInfiniteFetch<T>(
       offset: 0,
     };
 
+    const bootstrapData = consumeBootstrapData<T[]>(buildRequestPath(0));
+    if (bootstrapData !== null) {
+      const nextHasMore = bootstrapData.length === limit;
+      setResult(() => ({
+        data: bootstrapData,
+        error: null,
+        hasMore: nextHasMore,
+        isLoading: false,
+      }));
+      internalRef.current = {
+        hasMore: nextHasMore,
+        isLoading: false,
+        offset: bootstrapData.length,
+      };
+      return;
+    }
+
     fetchMore();
-  }, [apiPath, enabled, fetchMore]);
+  }, [apiPath, buildRequestPath, enabled, fetchMore, limit]);
 
   return {
     ...result,
diff --git a/application/client/src/utils/bootstrap_data.ts b/application/client/src/utils/bootstrap_data.ts
new file mode 100644
index 0000000000..4b9cd086c5
--- /dev/null
+++ b/application/client/src/utils/bootstrap_data.ts
@@ -0,0 +1,19 @@
+export function consumeBootstrapData<T>(key: string): T | null {
+  const data = window.__BOOTSTRAP_DATA__;
+  if (data == null || !(key in data)) {
+    return null;
+  }
+
+  const value = data[key] as T;
+  delete data[key];
+  return value;
+}
+
+export function peekBootstrapData<T>(key: string): T | null {
+  const data = window.__BOOTSTRAP_DATA__;
+  if (data == null || !(key in data)) {
+    return null;
+  }
+
+  return data[key] as T;
+}
diff --git a/application/server/src/routes/static.ts b/application/server/src/routes/static.ts
index b5820c986e..df4ac3796a 100644
--- a/application/server/src/routes/static.ts
+++ b/application/server/src/routes/static.ts
@@ -1,4 +1,3 @@
-import history from "connect-history-api-fallback";
 import { Router } from "express";
 import serveStatic from "serve-static";
 
@@ -7,12 +6,10 @@ import {
   PUBLIC_PATH,
   UPLOAD_PATH,
 } from "@web-speed-hackathon-2026/server/src/paths";
+import { renderAppHtml } from "@web-speed-hackathon-2026/server/src/utils/render_app_html";
 
 export const staticRouter = Router();
 
-// SPA 対応のため、ファイルが存在しないときに index.html を返す
-staticRouter.use(history());
-
 staticRouter.use(
   serveStatic(UPLOAD_PATH, {
     etag: false,
@@ -33,3 +30,16 @@ staticRouter.use(
     lastModified: false,
   }),
 );
+
+staticRouter.get("*", async (req, res, next) => {
+  if (/\.[^/]+$/.test(req.path)) {
+    return next();
+  }
+
+  try {
+    const html = await renderAppHtml(req);
+    return res.status(200).type("text/html").send(html);
+  } catch (error) {
+    return next(error);
+  }
+});
diff --git a/application/server/src/utils/render_app_html.ts b/application/server/src/utils/render_app_html.ts
new file mode 100644
index 0000000000..b66ec67a39
--- /dev/null
+++ b/application/server/src/utils/render_app_html.ts
@@ -0,0 +1,302 @@
+import { readFile } from "fs/promises";
+import path from "path";
+
+import type { Request } from "express";
+import { Op } from "sequelize";
+
+import {
+  DirectMessageConversation,
+  Post,
+  User,
+} from "@web-speed-hackathon-2026/server/src/models";
+import { CLIENT_DIST_PATH } from "@web-speed-hackathon-2026/server/src/paths";
+import { parseSearchQuery } from "@web-speed-hackathon-2026/server/src/utils/parse_search_query";
+
+const TIMELINE_LIMIT = 6;
+const SEARCH_LIMIT = 8;
+const USER_POSTS_LIMIT = 8;
+type HydratedPost = {
+  user?: { profileImage?: { id?: string | null } | null } | null;
+  images?: Array<{ id: string }> | null;
+};
+type HydratedConversation = {
+  initiator: { id: string; profileImage?: { id?: string | null } | null };
+  member: { id: string; profileImage?: { id?: string | null } | null };
+  messages: Array<{ createdAt: string }>;
+};
+const DM_LIST_INCLUDE = [
+  {
+    association: "initiator",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "member",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "messages",
+    attributes: ["body", "createdAt", "id", "isRead"],
+    include: [{ association: "sender", attributes: ["id"] }],
+    required: true,
+  },
+];
+const DM_DETAIL_INCLUDE = [
+  {
+    association: "initiator",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "member",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "messages",
+    attributes: ["body", "createdAt", "id", "isRead"],
+    include: [{ association: "sender", attributes: ["id"] }],
+    required: false,
+  },
+];
+
+let indexHtmlPromise: Promise<string> | null = null;
+
+function getImagePath(imageId: string): string {
+  return `/images/${imageId}.jpg`;
+}
+
+function getProfileImagePath(profileImageId: string): string {
+  return `/images/profiles/${profileImageId}.jpg`;
+}
+
+function serializeForInlineScript(value: unknown): string {
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+
+function addPostPreloads(
+  preloads: Set<string>,
+  post: HydratedPost | null | undefined,
+) {
+  if (post == null) {
+    return;
+  }
+
+  if (post.user?.profileImage?.id) {
+    preloads.add(getProfileImagePath(post.user.profileImage.id));
+  }
+  if (post.images?.[0]?.id) {
+    preloads.add(getImagePath(post.images[0].id));
+  }
+}
+
+async function getIndexHtmlTemplate() {
+  indexHtmlPromise ??= readFile(path.join(CLIENT_DIST_PATH, "index.html"), "utf8");
+  return indexHtmlPromise;
+}
+
+async function getDmConversations(userId: string) {
+  const conversations = await DirectMessageConversation.unscoped().findAll({
+    attributes: ["id"],
+    include: DM_LIST_INCLUDE,
+    where: {
+      [Op.or]: [{ initiatorId: userId }, { memberId: userId }],
+    },
+  });
+
+  return conversations
+    .map((conversation) => {
+      const json = conversation.toJSON();
+      const messages = [...(json.messages ?? [])].sort((a, b) => {
+        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      });
+
+      return {
+        ...json,
+        messages,
+      };
+    })
+    .sort((a, b) => {
+      const aLast = a.messages.at(-1);
+      const bLast = b.messages.at(-1);
+      if (aLast == null || bLast == null) {
+        return 0;
+      }
+
+      return new Date(bLast.createdAt).getTime() - new Date(aLast.createdAt).getTime();
+    });
+}
+
+async function buildBootstrapData(req: Request) {
+  const bootstrapData: Record<string, unknown> = {};
+  const preloads = new Set<string>();
+  const url = new URL(req.originalUrl, "http://localhost");
+  const pathname = url.pathname;
+
+  if (req.session.userId !== undefined && (pathname.startsWith("/dm") || pathname === "/crok")) {
+    const activeUser = await User.findByPk(req.session.userId);
+    if (activeUser != null) {
+      bootstrapData["/api/v1/me"] = activeUser;
+      if (activeUser.profileImage?.id) {
+        preloads.add(getProfileImagePath(activeUser.profileImage.id));
+      }
+    }
+  }
+
+  if (pathname === "/") {
+    const posts = await Post.findAll({ limit: TIMELINE_LIMIT, offset: 0 });
+    bootstrapData[`/api/v1/posts?limit=${TIMELINE_LIMIT}&offset=0`] = posts;
+    addPostPreloads(preloads, posts[0]?.toJSON() as unknown as HydratedPost | undefined);
+  } else if (pathname.startsWith("/posts/")) {
+    const postId = decodeURIComponent(pathname.slice("/posts/".length));
+      const post = await Post.findByPk(postId);
+    if (post != null) {
+      bootstrapData[`/api/v1/posts/${postId}`] = post;
+      addPostPreloads(preloads, post.toJSON() as unknown as HydratedPost);
+    }
+  } else if (pathname.startsWith("/users/")) {
+    const username = decodeURIComponent(pathname.slice("/users/".length));
+    const user = await User.findOne({ where: { username } });
+    if (user != null) {
+      bootstrapData[`/api/v1/users/${username}`] = user;
+      const posts = await Post.findAll({
+        limit: USER_POSTS_LIMIT,
+        offset: 0,
+        where: { userId: user.id },
+      });
+      bootstrapData[`/api/v1/users/${username}/posts?limit=${USER_POSTS_LIMIT}&offset=0`] = posts;
+      addPostPreloads(preloads, posts[0]?.toJSON() as unknown as HydratedPost | undefined);
+    }
+  } else if (pathname === "/search") {
+    const query = url.searchParams.get("q")?.trim() ?? "";
+    if (query !== "") {
+      const { keywords, sinceDate, untilDate } = parseSearchQuery(query);
+      if (keywords || sinceDate || untilDate) {
+        const searchTerm = keywords ? `%${keywords}%` : null;
+        const dateConditions: Record<symbol, Date>[] = [];
+        if (sinceDate) {
+          dateConditions.push({ [Op.gte]: sinceDate });
+        }
+        if (untilDate) {
+          dateConditions.push({ [Op.lte]: untilDate });
+        }
+        const dateWhere =
+          dateConditions.length > 0 ? { createdAt: Object.assign({}, ...dateConditions) } : {};
+        const textWhere = searchTerm ? { text: { [Op.like]: searchTerm } } : {};
+
+        const postsByText = await Post.findAll({
+          limit: SEARCH_LIMIT,
+          offset: 0,
+          where: {
+            ...textWhere,
+            ...dateWhere,
+          },
+        });
+
+        let postsByUser: typeof postsByText = [];
+        if (searchTerm) {
+          postsByUser = await Post.findAll({
+            include: [
+              {
+                association: "user",
+                attributes: ["id", "name", "username"],
+                include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+                required: true,
+                where: {
+                  [Op.or]: [
+                    { username: { [Op.like]: searchTerm } },
+                    { name: { [Op.like]: searchTerm } },
+                  ],
+                },
+              },
+              {
+                association: "images",
+                attributes: ["alt", "id"],
+                through: { attributes: [] },
+              },
+              { association: "movie", attributes: ["id"] },
+              { association: "sound", attributes: ["artist", "id", "title"] },
+            ],
+            limit: SEARCH_LIMIT,
+            offset: 0,
+            subQuery: false,
+            where: dateWhere,
+          });
+        }
+
+        const mergedPosts: typeof postsByText = [];
+        const seen = new Set<string>();
+        for (const post of [...postsByText, ...postsByUser]) {
+          if (!seen.has(post.id)) {
+            seen.add(post.id);
+            mergedPosts.push(post);
+          }
+        }
+
+        mergedPosts.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+        bootstrapData[
+          `/api/v1/search?q=${encodeURIComponent(query)}&limit=${SEARCH_LIMIT}&offset=0`
+        ] = mergedPosts.slice(0, SEARCH_LIMIT);
+        addPostPreloads(preloads, mergedPosts[0]?.toJSON() as unknown as HydratedPost | undefined);
+      }
+    }
+  } else if (pathname === "/dm" && req.session.userId !== undefined) {
+    const conversations = await getDmConversations(req.session.userId);
+    bootstrapData["/api/v1/dm"] = conversations;
+    const firstConversation = conversations[0] as unknown as HydratedConversation | undefined;
+    const peer =
+      firstConversation?.initiator.id !== req.session.userId
+        ? firstConversation?.initiator
+        : firstConversation?.member;
+    if (peer?.profileImage?.id) {
+      preloads.add(getProfileImagePath(peer.profileImage.id));
+    }
+  } else if (pathname.startsWith("/dm/") && req.session.userId !== undefined) {
+    const conversationId = decodeURIComponent(pathname.slice("/dm/".length));
+    const conversation = await DirectMessageConversation.unscoped().findOne({
+      attributes: ["id"],
+      include: DM_DETAIL_INCLUDE,
+      where: {
+        id: conversationId,
+        [Op.or]: [{ initiatorId: req.session.userId }, { memberId: req.session.userId }],
+      },
+    });
+
+    if (conversation != null) {
+      const json = conversation.toJSON() as unknown as HydratedConversation;
+      const messages = [...(json.messages ?? [])].sort((a, b) => {
+        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      });
+      bootstrapData[`/api/v1/dm/${conversationId}`] = {
+        ...json,
+        messages,
+      };
+
+      const peer =
+        json.initiator.id !== req.session.userId ? json.initiator : json.member;
+      if (peer.profileImage?.id) {
+        preloads.add(getProfileImagePath(peer.profileImage.id));
+      }
+    }
+  }
+
+  return { bootstrapData, preloads };
+}
+
+export async function renderAppHtml(req: Request) {
+  const [template, { bootstrapData, preloads }] = await Promise.all([
+    getIndexHtmlTemplate(),
+    buildBootstrapData(req),
+  ]);
+
+  const preloadTags = [...preloads]
+    .map((href) => `<link rel="preload" as="image" href="${href}" />`)
+    .join("");
+  const bootstrapScript =
+    Object.keys(bootstrapData).length > 0
+      ? `<script>window.__BOOTSTRAP_DATA__=${serializeForInlineScript(bootstrapData)};</script>`
+      : "";
+
+  return template.replace("</head>", `${preloadTags}${bootstrapScript}</head>`);
+}

From d6d300d239bcccf60d98645af944371d4f4f1cbc Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 10:08:52 +0900
Subject: [PATCH 10/21] Fix Express 5 SPA fallback route

---
 application/server/src/routes/static.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/server/src/routes/static.ts b/application/server/src/routes/static.ts
index df4ac3796a..4b64ea25df 100644
--- a/application/server/src/routes/static.ts
+++ b/application/server/src/routes/static.ts
@@ -31,7 +31,7 @@ staticRouter.use(
   }),
 );
 
-staticRouter.get("*", async (req, res, next) => {
+staticRouter.get("/{*splat}", async (req, res, next) => {
   if (/\.[^/]+$/.test(req.path)) {
     return next();
   }

From 6e44f98e22508a139762441f877d3cfb26cf0014 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 11:15:39 +0900
Subject: [PATCH 11/21] Lighten auth flow and Crok rendering

---
 application/client/src/auth/validation.ts     |   8 +-
 .../components/auth_modal/AuthModalPage.tsx   | 172 +++++++++++-------
 .../src/components/crok/AssistantMarkdown.tsx |  24 +++
 .../client/src/components/crok/ChatInput.tsx  |   4 +-
 .../src/components/crok/ChatMessage.tsx       |  34 ++--
 .../client/src/components/crok/CrokPage.tsx   |   6 +-
 .../components/foundation/CoveredImage.tsx    |  11 +-
 .../client/src/components/post/ImageArea.tsx  |   5 +-
 .../src/containers/AuthModalContainer.tsx     |   9 +-
 9 files changed, 175 insertions(+), 98 deletions(-)
 create mode 100644 application/client/src/components/crok/AssistantMarkdown.tsx

diff --git a/application/client/src/auth/validation.ts b/application/client/src/auth/validation.ts
index 2a83bbfb15..7a9a8f0ff6 100644
--- a/application/client/src/auth/validation.ts
+++ b/application/client/src/auth/validation.ts
@@ -1,9 +1,9 @@
-import { FormErrors } from "redux-form";
-
 import { AuthFormData } from "@web-speed-hackathon-2026/client/src/auth/types";
 
-export const validate = (values: AuthFormData): FormErrors<AuthFormData> => {
-  const errors: FormErrors<AuthFormData> = {};
+export type AuthFormErrors = Partial<Record<keyof AuthFormData, string>>;
+
+export const validate = (values: AuthFormData): AuthFormErrors => {
+  const errors: AuthFormErrors = {};
 
   const normalizedName = values.name?.trim() || "";
   const normalizedPassword = values.password?.trim() || "";
diff --git a/application/client/src/components/auth_modal/AuthModalPage.tsx b/application/client/src/components/auth_modal/AuthModalPage.tsx
index 08996f9afd..1035b0afd2 100644
--- a/application/client/src/components/auth_modal/AuthModalPage.tsx
+++ b/application/client/src/components/auth_modal/AuthModalPage.tsx
@@ -1,82 +1,134 @@
-import { useSelector } from "react-redux";
-import { Field, formValueSelector, InjectedFormProps, reduxForm } from "redux-form";
+import { ChangeEvent, FormEvent, useCallback, useMemo, useState } from "react";
 
 import { AuthFormData } from "@web-speed-hackathon-2026/client/src/auth/types";
 import { validate } from "@web-speed-hackathon-2026/client/src/auth/validation";
-import { FormInputField } from "@web-speed-hackathon-2026/client/src/components/foundation/FormInputField";
+import { Input } from "@web-speed-hackathon-2026/client/src/components/foundation/Input";
 import { Link } from "@web-speed-hackathon-2026/client/src/components/foundation/Link";
 import { ModalErrorMessage } from "@web-speed-hackathon-2026/client/src/components/modal/ModalErrorMessage";
 import { ModalSubmitButton } from "@web-speed-hackathon-2026/client/src/components/modal/ModalSubmitButton";
 
 interface Props {
   onRequestCloseModal: () => void;
+  onSubmit: (values: AuthFormData) => Promise<string | null>;
 }
 
-const AuthModalPageComponent = ({
-  onRequestCloseModal,
-  handleSubmit,
-  error,
-  invalid,
-  submitting,
-  initialValues,
-  change,
-}: Props & InjectedFormProps<AuthFormData, Props>) => {
-  const currentType: "signin" | "signup" = useSelector((state) =>
-    // @ts-ignore: formValueSelectorの型付けが弱いため、型に嘘をつく
-    formValueSelector("auth")(state, "type"),
+const INITIAL_VALUES: AuthFormData = {
+  type: "signin",
+  username: "",
+  name: "",
+  password: "",
+};
+
+export const AuthModalPage = ({ onRequestCloseModal, onSubmit }: Props) => {
+  const [values, setValues] = useState<AuthFormData>(INITIAL_VALUES);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const errors = useMemo(() => validate(values), [values]);
+  const isInvalid = Object.values(errors).some(Boolean);
+
+  const handleChange = useCallback(
+    (key: keyof AuthFormData) => (event: ChangeEvent<HTMLInputElement>) => {
+      const nextValue = event.target.value;
+      setSubmitError(null);
+      setValues((current) => ({
+        ...current,
+        [key]: nextValue,
+      }));
+    },
+    [],
+  );
+
+  const handleToggleType = useCallback(() => {
+    setSubmitError(null);
+    setValues((current) => ({
+      ...INITIAL_VALUES,
+      type: current.type === "signin" ? "signup" : "signin",
+    }));
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (isSubmitting || isInvalid) {
+        return;
+      }
+
+      setIsSubmitting(true);
+      setSubmitError(null);
+      try {
+        const error = await onSubmit(values);
+        if (error !== null) {
+          setSubmitError(error);
+        }
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [isInvalid, isSubmitting, onSubmit, values],
   );
-  const type = currentType ?? initialValues.type;
 
   return (
     <form className="grid gap-y-6" onSubmit={handleSubmit}>
       <h2 className="text-center text-2xl font-bold">
-        {type === "signin" ? "サインイン" : "新規登録"}
+        {values.type === "signin" ? "サインイン" : "新規登録"}
       </h2>
 
       <div className="flex justify-center">
-        <button
-          className="text-cax-brand underline"
-          onClick={() => change("type", type === "signin" ? "signup" : "signin")}
-          type="button"
-        >
-          {type === "signin" ? "初めての方はこちら" : "サインインはこちら"}
+        <button className="text-cax-brand underline" onClick={handleToggleType} type="button">
+          {values.type === "signin" ? "初めての方はこちら" : "サインインはこちら"}
         </button>
       </div>
 
       <div className="grid gap-y-2">
-        <Field
-          name="username"
-          component={FormInputField}
-          props={{
-            label: "ユーザー名",
-            leftItem: <span className="text-cax-text-subtle leading-none">@</span>,
-            autoComplete: "username",
-          }}
-        />
-
-        {type === "signup" && (
-          <Field
-            name="name"
-            component={FormInputField}
-            props={{
-              label: "名前",
-              autoComplete: "nickname",
-            }}
+        <div className="flex flex-col gap-y-1">
+          <label className="block text-sm" htmlFor="auth-username">
+            ユーザー名
+          </label>
+          <Input
+            id="auth-username"
+            aria-invalid={errors.username ? true : undefined}
+            autoComplete="username"
+            leftItem={<span className="text-cax-text-subtle leading-none">@</span>}
+            value={values.username}
+            onChange={handleChange("username")}
+          />
+          {errors.username ? <span className="text-cax-danger text-xs">{errors.username}</span> : null}
+        </div>
+
+        {values.type === "signup" ? (
+          <div className="flex flex-col gap-y-1">
+            <label className="block text-sm" htmlFor="auth-name">
+              名前
+            </label>
+            <Input
+              id="auth-name"
+              aria-invalid={errors.name ? true : undefined}
+              autoComplete="nickname"
+              value={values.name}
+              onChange={handleChange("name")}
+            />
+            {errors.name ? <span className="text-cax-danger text-xs">{errors.name}</span> : null}
+          </div>
+        ) : null}
+
+        <div className="flex flex-col gap-y-1">
+          <label className="block text-sm" htmlFor="auth-password">
+            パスワード
+          </label>
+          <Input
+            id="auth-password"
+            aria-invalid={errors.password ? true : undefined}
+            autoComplete={values.type === "signup" ? "new-password" : "current-password"}
+            type="password"
+            value={values.password}
+            onChange={handleChange("password")}
           />
-        )}
-
-        <Field
-          name="password"
-          component={FormInputField}
-          props={{
-            label: "パスワード",
-            type: "password",
-            autoComplete: type === "signup" ? "new-password" : "current-password",
-          }}
-        />
+          {errors.password ? <span className="text-cax-danger text-xs">{errors.password}</span> : null}
+        </div>
       </div>
 
-      {type === "signup" ? (
+      {values.type === "signup" ? (
         <p>
           <Link className="text-cax-brand underline" onClick={onRequestCloseModal} to="/terms">
             利用規約
@@ -85,19 +137,11 @@ const AuthModalPageComponent = ({
         </p>
       ) : null}
 
-      <ModalSubmitButton disabled={submitting || invalid} loading={submitting}>
-        {type === "signin" ? "サインイン" : "登録する"}
+      <ModalSubmitButton disabled={isSubmitting || isInvalid} loading={isSubmitting}>
+        {values.type === "signin" ? "サインイン" : "登録する"}
       </ModalSubmitButton>
 
-      <ModalErrorMessage>{error}</ModalErrorMessage>
+      <ModalErrorMessage>{submitError}</ModalErrorMessage>
     </form>
   );
 };
-
-export const AuthModalPage = reduxForm<AuthFormData, Props>({
-  form: "auth",
-  validate,
-  initialValues: {
-    type: "signin",
-  },
-})(AuthModalPageComponent);
diff --git a/application/client/src/components/crok/AssistantMarkdown.tsx b/application/client/src/components/crok/AssistantMarkdown.tsx
new file mode 100644
index 0000000000..b1e7b668ae
--- /dev/null
+++ b/application/client/src/components/crok/AssistantMarkdown.tsx
@@ -0,0 +1,24 @@
+import "katex/dist/katex.min.css";
+
+import Markdown from "react-markdown";
+import rehypeKatex from "rehype-katex";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+
+import { CodeBlock } from "@web-speed-hackathon-2026/client/src/components/crok/CodeBlock";
+
+interface Props {
+  content: string;
+}
+
+export const AssistantMarkdown = ({ content }: Props) => {
+  return (
+    <Markdown
+      components={{ pre: CodeBlock }}
+      rehypePlugins={[rehypeKatex]}
+      remarkPlugins={[remarkMath, remarkGfm]}
+    >
+      {content}
+    </Markdown>
+  );
+};
diff --git a/application/client/src/components/crok/ChatInput.tsx b/application/client/src/components/crok/ChatInput.tsx
index 6e4865528f..c334d5be38 100644
--- a/application/client/src/components/crok/ChatInput.tsx
+++ b/application/client/src/components/crok/ChatInput.tsx
@@ -137,7 +137,7 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
   useEffect(() => {
     let cancelled = false;
     const updateSuggestions = async () => {
-      if (!tokenizer || trimmedInputValue.length < 2) {
+      if (!tokenizer || trimmedInputValue.length < 8) {
         setSuggestions([]);
         setQueryTokens([]);
         setShowSuggestions(false);
@@ -165,7 +165,7 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
 
     const timeoutId = window.setTimeout(() => {
       void updateSuggestions();
-    }, 200);
+    }, 600);
 
     return () => {
       cancelled = true;
diff --git a/application/client/src/components/crok/ChatMessage.tsx b/application/client/src/components/crok/ChatMessage.tsx
index ea4a10d027..ad3315d70b 100644
--- a/application/client/src/components/crok/ChatMessage.tsx
+++ b/application/client/src/components/crok/ChatMessage.tsx
@@ -1,17 +1,18 @@
-import "katex/dist/katex.min.css";
-import Markdown from "react-markdown";
-import rehypeKatex from "rehype-katex";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
+import { Suspense, lazy } from "react";
 
-import { CodeBlock } from "@web-speed-hackathon-2026/client/src/components/crok/CodeBlock";
 import { TypingIndicator } from "@web-speed-hackathon-2026/client/src/components/crok/TypingIndicator";
 import { CrokLogo } from "@web-speed-hackathon-2026/client/src/components/foundation/CrokLogo";
 
 interface Props {
+  isStreaming?: boolean;
   message: Models.ChatMessage;
 }
 
+const LazyAssistantMarkdown = lazy(async () => {
+  const module = await import("@web-speed-hackathon-2026/client/src/components/crok/AssistantMarkdown");
+  return { default: module.AssistantMarkdown };
+});
+
 const UserMessage = ({ content }: { content: string }) => {
   return (
     <div className="mb-6 flex justify-end">
@@ -22,7 +23,7 @@ const UserMessage = ({ content }: { content: string }) => {
   );
 };
 
-const AssistantMessage = ({ content }: { content: string }) => {
+const AssistantMessage = ({ content, isStreaming = false }: { content: string; isStreaming?: boolean }) => {
   return (
     <div className="mb-6 flex gap-4">
       <div className="h-8 w-8 shrink-0">
@@ -32,14 +33,13 @@ const AssistantMessage = ({ content }: { content: string }) => {
         <div className="text-cax-text mb-1 text-sm font-medium">Crok</div>
         <div className="markdown text-cax-text max-w-none">
           {content ? (
-            <Markdown
-              components={{ pre: CodeBlock }}
-              key={content}
-              rehypePlugins={[rehypeKatex]}
-              remarkPlugins={[remarkMath, remarkGfm]}
-            >
-              {content}
-            </Markdown>
+            isStreaming ? (
+              <p className="whitespace-pre-wrap">{content}</p>
+            ) : (
+              <Suspense fallback={<p className="whitespace-pre-wrap">{content}</p>}>
+                <LazyAssistantMarkdown content={content} />
+              </Suspense>
+            )
           ) : (
             <TypingIndicator />
           )}
@@ -49,9 +49,9 @@ const AssistantMessage = ({ content }: { content: string }) => {
   );
 };
 
-export const ChatMessage = ({ message }: Props) => {
+export const ChatMessage = ({ message, isStreaming = false }: Props) => {
   if (message.role === "user") {
     return <UserMessage content={message.content} />;
   }
-  return <AssistantMessage content={message.content} />;
+  return <AssistantMessage content={message.content} isStreaming={isStreaming} />;
 };
diff --git a/application/client/src/components/crok/CrokPage.tsx b/application/client/src/components/crok/CrokPage.tsx
index 0be7678f84..ed6707caf4 100644
--- a/application/client/src/components/crok/CrokPage.tsx
+++ b/application/client/src/components/crok/CrokPage.tsx
@@ -28,7 +28,11 @@ export const CrokPage = ({ messages, isStreaming, onSendMessage }: Props) => {
           {messages.length === 0 && <WelcomeScreen />}
 
           {messages.map((message, index) => (
-            <ChatMessage key={index} message={message} />
+            <ChatMessage
+              key={index}
+              isStreaming={isStreaming && index === messages.length - 1 && message.role === "assistant"}
+              message={message}
+            />
           ))}
           <div ref={messagesEndRef} />
         </div>
diff --git a/application/client/src/components/foundation/CoveredImage.tsx b/application/client/src/components/foundation/CoveredImage.tsx
index 325923af30..6c51292ed1 100644
--- a/application/client/src/components/foundation/CoveredImage.tsx
+++ b/application/client/src/components/foundation/CoveredImage.tsx
@@ -7,6 +7,7 @@ import { fetchBinary } from "@web-speed-hackathon-2026/client/src/utils/fetchers
 
 interface Props {
   alt?: string;
+  decoding?: "async" | "auto" | "sync";
   fetchPriority?: "auto" | "high" | "low";
   loading?: "eager" | "lazy";
   src: string;
@@ -15,7 +16,13 @@ interface Props {
 /**
  * アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように画像を拡大縮小します
  */
-export const CoveredImage = ({ alt = "", fetchPriority = "auto", loading = "lazy", src }: Props) => {
+export const CoveredImage = ({
+  alt = "",
+  decoding = "async",
+  fetchPriority = "auto",
+  loading = "lazy",
+  src,
+}: Props) => {
   const dialogId = useId();
   // ダイアログの背景をクリックしたときに投稿詳細ページに遷移しないようにする
   const handleDialogClick = useCallback((ev: MouseEvent<HTMLDialogElement>) => {
@@ -45,7 +52,7 @@ export const CoveredImage = ({ alt = "", fetchPriority = "auto", loading = "lazy
       <img
         alt={alt}
         className="h-full w-full object-cover"
-        decoding="async"
+        decoding={decoding}
         fetchPriority={fetchPriority}
         loading={loading}
         src={src}
diff --git a/application/client/src/components/post/ImageArea.tsx b/application/client/src/components/post/ImageArea.tsx
index f50c11d37a..adea805fa0 100644
--- a/application/client/src/components/post/ImageArea.tsx
+++ b/application/client/src/components/post/ImageArea.tsx
@@ -27,8 +27,9 @@ export const ImageArea = ({ images, priority = false }: Props) => {
             >
               <CoveredImage
                 alt={image.alt}
-                fetchPriority={priority ? "high" : "auto"}
-                loading={priority ? "eager" : "lazy"}
+                decoding={priority && idx === 0 ? "sync" : "async"}
+                fetchPriority={priority && idx === 0 ? "high" : "auto"}
+                loading={priority || idx === 0 ? "eager" : "lazy"}
                 src={getImagePath(image.id)}
               />
             </div>
diff --git a/application/client/src/containers/AuthModalContainer.tsx b/application/client/src/containers/AuthModalContainer.tsx
index 9f4cceeb8b..1b626d05df 100644
--- a/application/client/src/containers/AuthModalContainer.tsx
+++ b/application/client/src/containers/AuthModalContainer.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { SubmissionError } from "redux-form";
 
 import { AuthFormData } from "@web-speed-hackathon-2026/client/src/auth/types";
 import { AuthModalPage } from "@web-speed-hackathon-2026/client/src/components/auth_modal/AuthModalPage";
@@ -57,7 +56,7 @@ export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
   }, [ref]);
 
   const handleSubmit = useCallback(
-    async (values: AuthFormData) => {
+    async (values: AuthFormData): Promise<string | null> => {
       try {
         if (values.type === "signup") {
           const user = await sendJSON<Models.User>("/api/v1/signup", values);
@@ -67,11 +66,9 @@ export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
           onUpdateActiveUser(user);
         }
         handleRequestCloseModal();
+        return null;
       } catch (err: unknown) {
-        const error = getErrorCode(err, values.type);
-        throw new SubmissionError({
-          _error: error,
-        });
+        return getErrorCode(err, values.type);
       }
     },
     [handleRequestCloseModal, onUpdateActiveUser],

From d6d63e3d423976fbb31ca3bd6c8a571277571878 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 15:31:41 +0900
Subject: [PATCH 12/21] Prerender critical shells and simplify auth flow

---
 .../server/src/utils/render_app_html.ts       | 163 +++++++++++++++++-
 1 file changed, 159 insertions(+), 4 deletions(-)

diff --git a/application/server/src/utils/render_app_html.ts b/application/server/src/utils/render_app_html.ts
index b66ec67a39..89d980b09d 100644
--- a/application/server/src/utils/render_app_html.ts
+++ b/application/server/src/utils/render_app_html.ts
@@ -75,6 +75,15 @@ function serializeForInlineScript(value: unknown): string {
   return JSON.stringify(value).replace(/</g, "\\u003c");
 }
 
+function escapeHtml(text: string): string {
+  return text
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
 function addPostPreloads(
   preloads: Set<string>,
   post: HydratedPost | null | undefined,
@@ -128,9 +137,139 @@ async function getDmConversations(userId: string) {
     });
 }
 
+function renderAppShell(content: string): string {
+  return [
+    '<div class="relative z-0 flex justify-center font-sans">',
+    '<div class="bg-cax-surface text-cax-text flex min-h-screen max-w-full">',
+    '<aside class="relative z-10">',
+    '<nav class="border-cax-border bg-cax-surface fixed right-0 bottom-0 left-0 z-10 h-12 border-t lg:relative lg:h-full lg:w-48 lg:border-t-0 lg:border-r"></nav>',
+    "</aside>",
+    '<main class="relative z-0 w-screen max-w-screen-sm min-w-0 shrink pb-12 lg:pb-0">',
+    content,
+    "</main>",
+    "</div>",
+    "</div>",
+  ].join("");
+}
+
+function renderTimelineShell(posts: Array<any>): string {
+  return posts
+    .slice(0, 2)
+    .map((post, index) => {
+      const profileImage = post.user?.profileImage?.id
+        ? `<img alt="${escapeHtml(post.user.profileImage.alt ?? "")}" class="h-full w-full object-cover" decoding="${index === 0 ? "sync" : "async"}" fetchpriority="${index === 0 ? "high" : "auto"}" height="64" loading="${index === 0 ? "eager" : "lazy"}" src="${getProfileImagePath(post.user.profileImage.id)}" width="64" />`
+        : "";
+      const heroImage = post.images?.[0]?.id
+        ? `<div class="relative mt-2 w-full"><div class="border-cax-border grid h-full w-full grid-cols-2 grid-rows-2 gap-1 overflow-hidden rounded-lg border" style="aspect-ratio:16 / 9"><div class="${post.images.length === 1 ? "col-span-2 row-span-2" : "col-span-1 row-span-2"} bg-cax-surface-subtle"><img alt="${escapeHtml(post.images[0].alt ?? "")}" class="h-full w-full object-cover" decoding="${index === 0 ? "sync" : "async"}" fetchpriority="${index === 0 ? "high" : "auto"}" loading="${index === 0 ? "eager" : "lazy"}" src="${getImagePath(post.images[0].id)}" /></div></div></div>`
+        : "";
+
+      return [
+        '<article class="hover:bg-cax-surface-subtle px-1 sm:px-4">',
+        '<div class="border-cax-border flex border-b px-2 pt-2 pb-4 sm:px-4">',
+        '<div class="shrink-0 grow-0 pr-2 sm:pr-4">',
+        `<a class="border-cax-border bg-cax-surface-subtle block h-12 w-12 overflow-hidden rounded-full border sm:h-16 sm:w-16" href="/users/${escapeHtml(post.user.username)}">${profileImage}</a>`,
+        "</div>",
+        '<div class="min-w-0 shrink grow">',
+        '<p class="overflow-hidden text-sm text-ellipsis whitespace-nowrap">',
+        `<a class="text-cax-text pr-1 font-bold" href="/users/${escapeHtml(post.user.username)}">${escapeHtml(post.user.name)}</a>`,
+        `<a class="text-cax-text-muted pr-1" href="/users/${escapeHtml(post.user.username)}">@${escapeHtml(post.user.username)}</a>`,
+        "</p>",
+        `<div class="text-cax-text leading-relaxed">${escapeHtml(post.text ?? "")}</div>`,
+        heroImage,
+        "</div>",
+        "</div>",
+        "</article>",
+      ].join("");
+    })
+    .join("");
+}
+
+function renderPostShell(post: any): string {
+  const profileImage = post.user?.profileImage?.id
+    ? `<img alt="${escapeHtml(post.user.profileImage.alt ?? "")}" class="h-full w-full object-cover" decoding="sync" fetchpriority="high" height="64" loading="eager" src="${getProfileImagePath(post.user.profileImage.id)}" width="64" />`
+    : "";
+  const heroImage = post.images?.[0]?.id
+    ? `<div class="relative mt-2 w-full"><div class="border-cax-border grid h-full w-full grid-cols-2 grid-rows-2 gap-1 overflow-hidden rounded-lg border" style="aspect-ratio:16 / 9"><div class="${post.images.length === 1 ? "col-span-2 row-span-2" : "col-span-1 row-span-2"} bg-cax-surface-subtle"><img alt="${escapeHtml(post.images[0].alt ?? "")}" class="h-full w-full object-cover" decoding="sync" fetchpriority="high" loading="eager" src="${getImagePath(post.images[0].id)}" /></div></div></div>`
+    : "";
+
+  return [
+    '<article class="px-1 sm:px-4">',
+    '<div class="border-cax-border border-b px-4 pt-4 pb-4">',
+    '<div class="flex items-center justify-center">',
+    '<div class="shrink-0 grow-0 pr-2">',
+    `<a class="border-cax-border bg-cax-surface-subtle block h-14 w-14 overflow-hidden rounded-full border sm:h-16 sm:w-16" href="/users/${escapeHtml(post.user.username)}">${profileImage}</a>`,
+    "</div>",
+    '<div class="min-w-0 shrink grow overflow-hidden text-ellipsis whitespace-nowrap">',
+    `<p><a class="text-cax-text font-bold" href="/users/${escapeHtml(post.user.username)}">${escapeHtml(post.user.name)}</a></p>`,
+    `<p><a class="text-cax-text-muted" href="/users/${escapeHtml(post.user.username)}">@${escapeHtml(post.user.username)}</a></p>`,
+    "</div>",
+    "</div>",
+    '<div class="pt-2 sm:pt-4">',
+    `<div class="text-cax-text text-xl leading-relaxed">${escapeHtml(post.text ?? "")}</div>`,
+    heroImage,
+    "</div>",
+    "</div>",
+    "</article>",
+  ].join("");
+}
+
+function renderDmListShell(conversations: Array<any>, activeUserId: string): string {
+  const items = conversations
+    .slice(0, 4)
+    .map((conversation) => {
+      const peer =
+        conversation.initiator.id !== activeUserId ? conversation.initiator : conversation.member;
+      const lastMessage = conversation.messages?.at(-1);
+      return [
+        '<li class="grid" style="contain-intrinsic-size:120px;content-visibility:auto">',
+        `<a class="hover:bg-cax-surface-subtle px-4" href="/dm/${escapeHtml(conversation.id)}">`,
+        '<div class="border-cax-border flex gap-4 border-b px-4 pt-2 pb-4">',
+        `<img alt="${escapeHtml(peer.profileImage?.alt ?? "")}" class="w-12 shrink-0 self-start rounded-full object-cover" decoding="sync" fetchpriority="high" height="48" loading="eager" src="${getProfileImagePath(peer.profileImage.id)}" width="48" />`,
+        '<div class="flex flex-1 flex-col">',
+        `<div><p class="font-bold">${escapeHtml(peer.name)}</p><p class="text-cax-text-muted text-xs">@${escapeHtml(peer.username)}</p></div>`,
+        `<p class="mt-1 line-clamp-2 text-sm wrap-anywhere">${escapeHtml(lastMessage?.body ?? "")}</p>`,
+        "</div></div></a></li>",
+      ].join("");
+    })
+    .join("");
+
+  return [
+    '<section><header class="border-cax-border flex flex-col gap-4 border-b px-4 pt-6 pb-4">',
+    '<h1 class="text-2xl font-bold">ダイレクトメッセージ</h1>',
+    '<div class="flex flex-wrap items-center gap-4"><button class="flex items-center justify-center gap-2 rounded-full px-4 py-2 border bg-cax-brand text-cax-surface-raised border-transparent" type="button"><span>新しくDMを始める</span></button></div>',
+    "</header>",
+    `<ul data-testid="dm-list">${items}</ul>`,
+    "</section>",
+  ].join("");
+}
+
+function renderDmDetailShell(conversation: any, activeUserId: string): string {
+  const peer = conversation.initiator.id !== activeUserId ? conversation.initiator : conversation.member;
+  const messages = (conversation.messages ?? []).slice(-6);
+
+  return [
+    '<section class="bg-cax-surface flex min-h-[calc(100vh-(--spacing(12)))] flex-col lg:min-h-screen">',
+    '<header class="border-cax-border bg-cax-surface sticky top-0 z-10 flex items-center gap-2 border-b px-4 py-3">',
+    `<img alt="${escapeHtml(peer.profileImage?.alt ?? "")}" class="h-12 w-12 rounded-full object-cover" decoding="sync" fetchpriority="high" height="48" loading="eager" src="${getProfileImagePath(peer.profileImage.id)}" width="48" />`,
+    `<div class="min-w-0"><h1 class="overflow-hidden text-xl font-bold text-ellipsis whitespace-nowrap">${escapeHtml(peer.name)}</h1><p class="text-cax-text-muted overflow-hidden text-xs text-ellipsis whitespace-nowrap">@${escapeHtml(peer.username)}</p></div>`,
+    "</header>",
+    '<div class="bg-cax-surface-subtle flex-1 space-y-4 overflow-y-auto px-4 pt-4 pb-8"><ul class="grid gap-3" data-testid="dm-message-list">',
+    ...messages.map((message: any) => {
+      const isMine = message.sender.id === activeUserId;
+      return [
+        `<li class="flex flex-col w-full ${isMine ? "items-end" : "items-start"}">`,
+        `<p class="max-w-3/4 rounded-xl border px-4 py-2 text-sm whitespace-pre-wrap leading-relaxed wrap-anywhere ${isMine ? "rounded-br-sm border-transparent bg-cax-brand text-cax-surface-raised" : "rounded-bl-sm border-cax-border bg-cax-surface text-cax-text"}">${escapeHtml(message.body)}</p>`,
+        "</li>",
+      ].join("");
+    }).join(""),
+    "</ul></div></section>",
+  ].join("");
+}
+
 async function buildBootstrapData(req: Request) {
   const bootstrapData: Record<string, unknown> = {};
   const preloads = new Set<string>();
+  let shellMarkup = "";
   const url = new URL(req.originalUrl, "http://localhost");
   const pathname = url.pathname;
 
@@ -148,12 +287,14 @@ async function buildBootstrapData(req: Request) {
     const posts = await Post.findAll({ limit: TIMELINE_LIMIT, offset: 0 });
     bootstrapData[`/api/v1/posts?limit=${TIMELINE_LIMIT}&offset=0`] = posts;
     addPostPreloads(preloads, posts[0]?.toJSON() as unknown as HydratedPost | undefined);
+    shellMarkup = renderAppShell(renderTimelineShell(posts.map((post) => post.toJSON())));
   } else if (pathname.startsWith("/posts/")) {
     const postId = decodeURIComponent(pathname.slice("/posts/".length));
-      const post = await Post.findByPk(postId);
+    const post = await Post.findByPk(postId);
     if (post != null) {
       bootstrapData[`/api/v1/posts/${postId}`] = post;
       addPostPreloads(preloads, post.toJSON() as unknown as HydratedPost);
+      shellMarkup = renderAppShell(renderPostShell(post.toJSON()));
     }
   } else if (pathname.startsWith("/users/")) {
     const username = decodeURIComponent(pathname.slice("/users/".length));
@@ -167,6 +308,7 @@ async function buildBootstrapData(req: Request) {
       });
       bootstrapData[`/api/v1/users/${username}/posts?limit=${USER_POSTS_LIMIT}&offset=0`] = posts;
       addPostPreloads(preloads, posts[0]?.toJSON() as unknown as HydratedPost | undefined);
+      shellMarkup = renderAppShell(renderTimelineShell(posts.map((post) => post.toJSON())));
     }
   } else if (pathname === "/search") {
     const query = url.searchParams.get("q")?.trim() ?? "";
@@ -252,6 +394,7 @@ async function buildBootstrapData(req: Request) {
     if (peer?.profileImage?.id) {
       preloads.add(getProfileImagePath(peer.profileImage.id));
     }
+    shellMarkup = renderAppShell(renderDmListShell(conversations, req.session.userId));
   } else if (pathname.startsWith("/dm/") && req.session.userId !== undefined) {
     const conversationId = decodeURIComponent(pathname.slice("/dm/".length));
     const conversation = await DirectMessageConversation.unscoped().findOne({
@@ -278,14 +421,23 @@ async function buildBootstrapData(req: Request) {
       if (peer.profileImage?.id) {
         preloads.add(getProfileImagePath(peer.profileImage.id));
       }
+      shellMarkup = renderAppShell(
+        renderDmDetailShell(
+          {
+            ...json,
+            messages,
+          },
+          req.session.userId,
+        ),
+      );
     }
   }
 
-  return { bootstrapData, preloads };
+  return { bootstrapData, preloads, shellMarkup };
 }
 
 export async function renderAppHtml(req: Request) {
-  const [template, { bootstrapData, preloads }] = await Promise.all([
+  const [template, { bootstrapData, preloads, shellMarkup }] = await Promise.all([
     getIndexHtmlTemplate(),
     buildBootstrapData(req),
   ]);
@@ -297,6 +449,9 @@ export async function renderAppHtml(req: Request) {
     Object.keys(bootstrapData).length > 0
       ? `<script>window.__BOOTSTRAP_DATA__=${serializeForInlineScript(bootstrapData)};</script>`
       : "";
+  const appShell = shellMarkup !== "" ? `<div id="app">${shellMarkup}</div>` : '<div id="app"></div>';
 
-  return template.replace("</head>", `${preloadTags}${bootstrapScript}</head>`);
+  return template
+    .replace('<div id="app"></div>', appShell)
+    .replace("</head>", `${preloadTags}${bootstrapScript}</head>`);
 }

From 256b848a8c1b418bb2a43eeb5174e08361c84558 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 16:18:07 +0900
Subject: [PATCH 13/21] Serve prerendered shell for SPA routes

---
 application/server/src/routes/static.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/application/server/src/routes/static.ts b/application/server/src/routes/static.ts
index 4b64ea25df..84d03dfb9b 100644
--- a/application/server/src/routes/static.ts
+++ b/application/server/src/routes/static.ts
@@ -27,6 +27,7 @@ staticRouter.use(
 staticRouter.use(
   serveStatic(CLIENT_DIST_PATH, {
     etag: false,
+    index: false,
     lastModified: false,
   }),
 );

From 96ba6eded4a64ec6972e2898556d369dad4e3148 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 16:23:35 +0900
Subject: [PATCH 14/21] Hydrate client state from prerendered bootstrap

---
 .../direct_message/DirectMessageListPage.tsx  | 15 ++++-
 .../client/src/containers/AppContainer.tsx    |  8 ++-
 application/client/src/hooks/use_fetch.ts     | 11 ++--
 .../client/src/hooks/use_infinite_fetch.ts    | 59 +++++++++++++------
 4 files changed, 66 insertions(+), 27 deletions(-)

diff --git a/application/client/src/components/direct_message/DirectMessageListPage.tsx b/application/client/src/components/direct_message/DirectMessageListPage.tsx
index 74e9fb2972..b7f524c35e 100644
--- a/application/client/src/components/direct_message/DirectMessageListPage.tsx
+++ b/application/client/src/components/direct_message/DirectMessageListPage.tsx
@@ -4,6 +4,7 @@ import { Button } from "@web-speed-hackathon-2026/client/src/components/foundati
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { Link } from "@web-speed-hackathon-2026/client/src/components/foundation/Link";
 import { useWs } from "@web-speed-hackathon-2026/client/src/hooks/use_ws";
+import { consumeBootstrapData, peekBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
 import { formatRelativeFromNowJa } from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { fetchJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
@@ -14,8 +15,9 @@ interface Props {
 }
 
 export const DirectMessageListPage = ({ activeUser, newDmModalId }: Props) => {
-  const [conversations, setConversations] =
-    useState<Array<Models.DirectMessageConversation> | null>(null);
+  const [conversations, setConversations] = useState<Array<Models.DirectMessageConversation> | null>(
+    () => peekBootstrapData<Array<Models.DirectMessageConversation>>("/api/v1/dm"),
+  );
   const [error, setError] = useState<Error | null>(null);
 
   const loadConversations = useCallback(async () => {
@@ -34,6 +36,15 @@ export const DirectMessageListPage = ({ activeUser, newDmModalId }: Props) => {
   }, [activeUser]);
 
   useEffect(() => {
+    const bootstrapConversations = consumeBootstrapData<Array<Models.DirectMessageConversation>>(
+      "/api/v1/dm",
+    );
+    if (bootstrapConversations !== null) {
+      setConversations(bootstrapConversations);
+      setError(null);
+      return;
+    }
+
     void loadConversations();
   }, [loadConversations]);
 
diff --git a/application/client/src/containers/AppContainer.tsx b/application/client/src/containers/AppContainer.tsx
index 978480f32f..ac6db67b6f 100644
--- a/application/client/src/containers/AppContainer.tsx
+++ b/application/client/src/containers/AppContainer.tsx
@@ -13,7 +13,7 @@ import { SearchContainer } from "@web-speed-hackathon-2026/client/src/containers
 import { TermContainer } from "@web-speed-hackathon-2026/client/src/containers/TermContainer";
 import { TimelineContainer } from "@web-speed-hackathon-2026/client/src/containers/TimelineContainer";
 import { UserProfileContainer } from "@web-speed-hackathon-2026/client/src/containers/UserProfileContainer";
-import { consumeBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
+import { consumeBootstrapData, peekBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
 import { fetchJSON, sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
 const LazyCrokContainer = lazy(async () => {
@@ -28,8 +28,10 @@ export const AppContainer = () => {
     window.scrollTo(0, 0);
   }, [pathname]);
 
-  const [activeUser, setActiveUser] = useState<Models.User | null>(null);
-  const [isLoadingActiveUser, setIsLoadingActiveUser] = useState(true);
+  const initialBootstrapUser =
+    (pathname.startsWith("/dm") || pathname === "/crok") ? peekBootstrapData<Models.User>("/api/v1/me") : null;
+  const [activeUser, setActiveUser] = useState<Models.User | null>(initialBootstrapUser);
+  const [isLoadingActiveUser, setIsLoadingActiveUser] = useState(initialBootstrapUser === null);
   const activeUserRequestIdRef = useRef(0);
 
   const applyActiveUser = useCallback((user: Models.User | null) => {
diff --git a/application/client/src/hooks/use_fetch.ts b/application/client/src/hooks/use_fetch.ts
index bcdf5e544f..5921d6e6c5 100644
--- a/application/client/src/hooks/use_fetch.ts
+++ b/application/client/src/hooks/use_fetch.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import { consumeBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
+import { consumeBootstrapData, peekBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
 
 interface ReturnValues<T> {
   data: T | null;
@@ -12,11 +12,12 @@ export function useFetch<T>(
   apiPath: string,
   fetcher: (apiPath: string) => Promise<T>,
 ): ReturnValues<T> {
-  const [result, setResult] = useState<ReturnValues<T>>({
-    data: null,
+  const initialBootstrapData = apiPath ? peekBootstrapData<T>(apiPath) : null;
+  const [result, setResult] = useState<ReturnValues<T>>(() => ({
+    data: initialBootstrapData,
     error: null,
-    isLoading: true,
-  });
+    isLoading: apiPath !== "" && initialBootstrapData === null,
+  }));
 
   useEffect(() => {
     if (!apiPath) {
diff --git a/application/client/src/hooks/use_infinite_fetch.ts b/application/client/src/hooks/use_infinite_fetch.ts
index d284ca281a..479470ef9c 100644
--- a/application/client/src/hooks/use_infinite_fetch.ts
+++ b/application/client/src/hooks/use_infinite_fetch.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
-import { consumeBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
+import { consumeBootstrapData, peekBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
 
 const DEFAULT_LIMIT = 12;
 
@@ -9,6 +9,13 @@ interface Options {
   limit?: number;
 }
 
+function createRequestPath(apiPath: string, limit: number, offset: number) {
+  const requestUrl = new URL(apiPath, window.location.origin);
+  requestUrl.searchParams.set("limit", String(limit));
+  requestUrl.searchParams.set("offset", String(offset));
+  return `${requestUrl.pathname}${requestUrl.search}`;
+}
+
 interface ReturnValues<T> {
   data: Array<T>;
   error: Error | null;
@@ -22,21 +29,26 @@ export function useInfiniteFetch<T>(
   fetcher: (apiPath: string) => Promise<T[]>,
   { enabled = true, limit = DEFAULT_LIMIT }: Options = {},
 ): ReturnValues<T> {
-  const internalRef = useRef({ hasMore: true, isLoading: false, offset: 0 });
+  const initialRequestPath = apiPath && enabled ? createRequestPath(apiPath, limit, 0) : "";
+  const initialBootstrapData =
+    initialRequestPath !== "" ? peekBootstrapData<T[]>(initialRequestPath) : null;
+  const initialHasMore = initialBootstrapData !== null ? initialBootstrapData.length === limit : true;
+  const internalRef = useRef({
+    hasMore: initialBootstrapData !== null ? initialHasMore : true,
+    isLoading: false,
+    offset: initialBootstrapData?.length ?? 0,
+  });
 
-  const [result, setResult] = useState<Omit<ReturnValues<T>, "fetchMore">>({
-    data: [],
+  const [result, setResult] = useState<Omit<ReturnValues<T>, "fetchMore">>(() => ({
+    data: initialBootstrapData ?? [],
     error: null,
-    hasMore: true,
-    isLoading: true,
-  });
+    hasMore: initialBootstrapData !== null ? initialHasMore : true,
+    isLoading: apiPath !== "" && enabled && initialBootstrapData === null,
+  }));
 
   const buildRequestPath = useCallback(
     (offset: number) => {
-      const requestUrl = new URL(apiPath, window.location.origin);
-      requestUrl.searchParams.set("limit", String(limit));
-      requestUrl.searchParams.set("offset", String(offset));
-      return `${requestUrl.pathname}${requestUrl.search}`;
+      return createRequestPath(apiPath, limit, offset);
     },
     [apiPath, limit],
   );
@@ -120,12 +132,25 @@ export function useInfiniteFetch<T>(
     const bootstrapData = consumeBootstrapData<T[]>(buildRequestPath(0));
     if (bootstrapData !== null) {
       const nextHasMore = bootstrapData.length === limit;
-      setResult(() => ({
-        data: bootstrapData,
-        error: null,
-        hasMore: nextHasMore,
-        isLoading: false,
-      }));
+      setResult((current) => {
+        if (
+          current.data === bootstrapData ||
+          (current.data.length === bootstrapData.length && current.error === null && !current.isLoading)
+        ) {
+          return {
+            ...current,
+            hasMore: nextHasMore,
+            isLoading: false,
+          };
+        }
+
+        return {
+          data: bootstrapData,
+          error: null,
+          hasMore: nextHasMore,
+          isLoading: false,
+        };
+      });
       internalRef.current = {
         hasMore: nextHasMore,
         isLoading: false,

From 2e17134cb475a510293730285b6ae0b5429e3a47 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 16:52:43 +0900
Subject: [PATCH 15/21] Keep prerendered shell visible until app mount

---
 application/client/src/containers/AppContainer.tsx    |  6 ++++--
 .../client/src/containers/TimelineContainer.tsx       |  2 +-
 application/client/src/index.css                      |  8 ++++++++
 application/client/src/index.tsx                      |  7 +++++++
 application/server/src/utils/render_app_html.ts       | 11 ++++++++++-
 5 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/application/client/src/containers/AppContainer.tsx b/application/client/src/containers/AppContainer.tsx
index ac6db67b6f..b6ac5ad024 100644
--- a/application/client/src/containers/AppContainer.tsx
+++ b/application/client/src/containers/AppContainer.tsx
@@ -77,7 +77,9 @@ export const AppContainer = () => {
     };
 
     if (shouldPrioritizeAuth) {
-      setIsLoadingActiveUser(true);
+      if (activeUser == null) {
+        setIsLoadingActiveUser(true);
+      }
       loadActiveUser();
       return () => {
         cancelled = true;
@@ -100,7 +102,7 @@ export const AppContainer = () => {
         window.cancelIdleCallback(idleCallbackId);
       }
     };
-  }, [pathname]);
+  }, [activeUser, pathname]);
   const handleLogout = useCallback(async () => {
     await sendJSON("/api/v1/signout", {});
     applyActiveUser(null);
diff --git a/application/client/src/containers/TimelineContainer.tsx b/application/client/src/containers/TimelineContainer.tsx
index 227863960e..a46a52135d 100644
--- a/application/client/src/containers/TimelineContainer.tsx
+++ b/application/client/src/containers/TimelineContainer.tsx
@@ -9,7 +9,7 @@ export const TimelineContainer = () => {
   const { data: posts, fetchMore, hasMore } = useInfiniteFetch<Models.Post>(
     "/api/v1/posts",
     fetchJSON,
-    { limit: 6 },
+    { limit: 4 },
   );
 
   return (
diff --git a/application/client/src/index.css b/application/client/src/index.css
index e8f81495da..e206e8a1b5 100644
--- a/application/client/src/index.css
+++ b/application/client/src/index.css
@@ -15,6 +15,14 @@
   [role="button"]:not(:disabled) {
     cursor: pointer;
   }
+
+  body[data-has-prerender="1"][data-app-mounted="0"] #app {
+    visibility: hidden;
+  }
+
+  body[data-app-mounted="1"] #prerender-shell {
+    display: none;
+  }
 }
 
 @theme {
diff --git a/application/client/src/index.tsx b/application/client/src/index.tsx
index 70e05a460f..bbc0624226 100644
--- a/application/client/src/index.tsx
+++ b/application/client/src/index.tsx
@@ -15,4 +15,11 @@ if (appNode != null) {
       </BrowserRouter>
     </Provider>,
   );
+
+  if (document.body.dataset["hasPrerender"] === "1") {
+    window.requestAnimationFrame(() => {
+      document.body.dataset["appMounted"] = "1";
+      document.getElementById("prerender-shell")?.remove();
+    });
+  }
 }
diff --git a/application/server/src/utils/render_app_html.ts b/application/server/src/utils/render_app_html.ts
index 89d980b09d..394a484458 100644
--- a/application/server/src/utils/render_app_html.ts
+++ b/application/server/src/utils/render_app_html.ts
@@ -449,9 +449,18 @@ export async function renderAppHtml(req: Request) {
     Object.keys(bootstrapData).length > 0
       ? `<script>window.__BOOTSTRAP_DATA__=${serializeForInlineScript(bootstrapData)};</script>`
       : "";
-  const appShell = shellMarkup !== "" ? `<div id="app">${shellMarkup}</div>` : '<div id="app"></div>';
+  const appShell =
+    shellMarkup !== ""
+      ? `<div id="prerender-shell">${shellMarkup}</div><div id="app"></div>`
+      : '<div id="app"></div>';
 
   return template
+    .replace(
+      '<body class="bg-cax-canvas text-cax-text">',
+      `<body class="bg-cax-canvas text-cax-text"${
+        shellMarkup !== "" ? ' data-has-prerender="1" data-app-mounted="0"' : ""
+      }>`,
+    )
     .replace('<div id="app"></div>', appShell)
     .replace("</head>", `${preloadTags}${bootstrapScript}</head>`);
 }

From 27fc4a1ee4895566cf5bc4184c85dca692421efd Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 16:57:33 +0900
Subject: [PATCH 16/21] Enable keep-alive and static asset caching

---
 application/server/src/app.ts           |  7 ++-----
 application/server/src/routes/static.ts | 15 ++++++++-------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/application/server/src/app.ts b/application/server/src/app.ts
index 671fb424cc..b1bee8261f 100644
--- a/application/server/src/app.ts
+++ b/application/server/src/app.ts
@@ -13,11 +13,8 @@ app.use(sessionMiddleware);
 app.use(bodyParser.json());
 app.use(bodyParser.raw({ limit: "10mb" }));
 
-app.use((_req, res, next) => {
-  res.header({
-    "Cache-Control": "max-age=0, no-transform",
-    Connection: "close",
-  });
+app.use("/api/v1", (_req, res, next) => {
+  res.setHeader("Cache-Control", "no-store");
   return next();
 });
 
diff --git a/application/server/src/routes/static.ts b/application/server/src/routes/static.ts
index 84d03dfb9b..56fd68f7c8 100644
--- a/application/server/src/routes/static.ts
+++ b/application/server/src/routes/static.ts
@@ -12,23 +12,20 @@ export const staticRouter = Router();
 
 staticRouter.use(
   serveStatic(UPLOAD_PATH, {
-    etag: false,
-    lastModified: false,
+    maxAge: "1m",
   }),
 );
 
 staticRouter.use(
   serveStatic(PUBLIC_PATH, {
-    etag: false,
-    lastModified: false,
+    maxAge: "1m",
   }),
 );
 
 staticRouter.use(
   serveStatic(CLIENT_DIST_PATH, {
-    etag: false,
     index: false,
-    lastModified: false,
+    maxAge: "1m",
   }),
 );
 
@@ -39,7 +36,11 @@ staticRouter.get("/{*splat}", async (req, res, next) => {
 
   try {
     const html = await renderAppHtml(req);
-    return res.status(200).type("text/html").send(html);
+    return res
+      .status(200)
+      .set("Cache-Control", "no-cache")
+      .type("text/html")
+      .send(html);
   } catch (error) {
     return next(error);
   }

From 15b0427d12767d891d6e481e615d294527979539 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 17:24:52 +0900
Subject: [PATCH 17/21] Defer prerender loader import from server startup

---
 application/server/src/routes/static.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/application/server/src/routes/static.ts b/application/server/src/routes/static.ts
index 56fd68f7c8..6af418701f 100644
--- a/application/server/src/routes/static.ts
+++ b/application/server/src/routes/static.ts
@@ -6,7 +6,6 @@ import {
   PUBLIC_PATH,
   UPLOAD_PATH,
 } from "@web-speed-hackathon-2026/server/src/paths";
-import { renderAppHtml } from "@web-speed-hackathon-2026/server/src/utils/render_app_html";
 
 export const staticRouter = Router();
 
@@ -35,6 +34,9 @@ staticRouter.get("/{*splat}", async (req, res, next) => {
   }
 
   try {
+    const { renderAppHtml } = await import(
+      "@web-speed-hackathon-2026/server/src/utils/render_app_html"
+    );
     const html = await renderAppHtml(req);
     return res
       .status(200)

From ac1c3e406ba3566cdae036d060c5fe87dfbcd5e2 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 17:33:11 +0900
Subject: [PATCH 18/21] Align home bootstrap payload with client page size

---
 application/server/src/utils/render_app_html.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/server/src/utils/render_app_html.ts b/application/server/src/utils/render_app_html.ts
index 394a484458..13705238a7 100644
--- a/application/server/src/utils/render_app_html.ts
+++ b/application/server/src/utils/render_app_html.ts
@@ -12,7 +12,7 @@ import {
 import { CLIENT_DIST_PATH } from "@web-speed-hackathon-2026/server/src/paths";
 import { parseSearchQuery } from "@web-speed-hackathon-2026/server/src/utils/parse_search_query";
 
-const TIMELINE_LIMIT = 6;
+const TIMELINE_LIMIT = 4;
 const SEARCH_LIMIT = 8;
 const USER_POSTS_LIMIT = 8;
 type HydratedPost = {

From 0e40a2c3d09a3179eaeb4d50b3531ae59c8f46f5 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 17:44:38 +0900
Subject: [PATCH 19/21] Compress responses and stabilize DM sends

---
 .../src/containers/DirectMessageContainer.tsx | 30 +++++++++++++++++--
 application/pnpm-lock.yaml                    | 14 +++++++++
 application/server/package.json               |  2 ++
 application/server/src/app.ts                 | 11 +++++++
 .../server/src/utils/render_app_html.ts       | 17 +++++++++++
 5 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/application/client/src/containers/DirectMessageContainer.tsx b/application/client/src/containers/DirectMessageContainer.tsx
index 235205f662..7738009cd5 100644
--- a/application/client/src/containers/DirectMessageContainer.tsx
+++ b/application/client/src/containers/DirectMessageContainer.tsx
@@ -69,17 +69,43 @@ export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
 
   const handleSubmit = useCallback(
     async (params: DirectMessageFormData) => {
+      if (activeUser == null) {
+        return;
+      }
+
       setIsSubmitting(true);
       try {
         await sendJSON(`/api/v1/dm/${conversationId}/messages`, {
           body: params.body,
         });
-        loadConversation();
+        const createdAt = new Date().toISOString();
+        setConversation((current) => {
+          if (current == null) {
+            return current;
+          }
+
+          return {
+            ...current,
+            messages: [
+              ...current.messages,
+              {
+                body: params.body,
+                createdAt,
+                id: `optimistic-${createdAt}`,
+                isRead: false,
+                sender: {
+                  id: activeUser.id,
+                },
+              } as Models.DirectMessage,
+            ],
+          };
+        });
+        void loadConversation();
       } finally {
         setIsSubmitting(false);
       }
     },
-    [conversationId, loadConversation],
+    [activeUser, conversationId, loadConversation],
   );
 
   const handleTyping = useCallback(async () => {
diff --git a/application/pnpm-lock.yaml b/application/pnpm-lock.yaml
index 18f6e6997c..4d9d56849e 100644
--- a/application/pnpm-lock.yaml
+++ b/application/pnpm-lock.yaml
@@ -274,6 +274,9 @@ importers:
       '@tsconfig/strictest':
         specifier: 2.0.8
         version: 2.0.8
+      '@types/compression':
+        specifier: 1.8.1
+        version: 1.8.1
       '@web-speed-hackathon-2026/server':
         specifier: workspace:*
         version: 'link:'
@@ -283,6 +286,9 @@ importers:
       body-parser:
         specifier: 2.2.0
         version: 2.2.0
+      compression:
+        specifier: 1.8.1
+        version: 1.8.1
       connect-history-api-fallback:
         specifier: 2.0.0
         version: 2.0.0
@@ -1739,6 +1745,9 @@ packages:
   '@types/common-tags@1.8.4':
     resolution: {integrity: sha512-S+1hLDJPjWNDhcGxsxEbepzaxWqURP/o+3cP4aa2w7yBXgdcmKGQtZzP8JbyfOd0m+33nh+8+kvxYE2UJtBDkg==}
 
+  '@types/compression@1.8.1':
+    resolution: {integrity: sha512-kCFuWS0ebDbmxs0AXYn6e2r2nrGAb5KwQhknjSPSPgJcGd8+HVSILlUyFhGqML2gk39HcG7D1ydW9/qpYkN00Q==}
+
   '@types/connect-history-api-fallback@1.5.4':
     resolution: {integrity: sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==}
 
@@ -6260,6 +6269,11 @@ snapshots:
 
   '@types/common-tags@1.8.4': {}
 
+  '@types/compression@1.8.1':
+    dependencies:
+      '@types/express': 5.0.3
+      '@types/node': 22.18.8
+
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
       '@types/express-serve-static-core': 5.1.0
diff --git a/application/server/package.json b/application/server/package.json
index 9482575df7..a5467c16ab 100644
--- a/application/server/package.json
+++ b/application/server/package.json
@@ -14,9 +14,11 @@
   },
   "dependencies": {
     "@tsconfig/strictest": "2.0.8",
+    "@types/compression": "1.8.1",
     "@web-speed-hackathon-2026/server": "workspace:*",
     "bcrypt": "6.0.0",
     "body-parser": "2.2.0",
+    "compression": "1.8.1",
     "connect-history-api-fallback": "2.0.0",
     "express": "5.1.0",
     "express-session": "1.18.2",
diff --git a/application/server/src/app.ts b/application/server/src/app.ts
index b1bee8261f..bd430d4d48 100644
--- a/application/server/src/app.ts
+++ b/application/server/src/app.ts
@@ -1,4 +1,5 @@
 import bodyParser from "body-parser";
+import compression from "compression";
 import Express from "express";
 
 import { apiRouter } from "@web-speed-hackathon-2026/server/src/routes/api";
@@ -12,6 +13,16 @@ app.set("trust proxy", true);
 app.use(sessionMiddleware);
 app.use(bodyParser.json());
 app.use(bodyParser.raw({ limit: "10mb" }));
+app.use(
+  compression({
+    filter: (req, res) => {
+      if (req.path === "/api/v1/crok") {
+        return false;
+      }
+      return compression.filter(req, res);
+    },
+  }),
+);
 
 app.use("/api/v1", (_req, res, next) => {
   res.setHeader("Cache-Control", "no-store");
diff --git a/application/server/src/utils/render_app_html.ts b/application/server/src/utils/render_app_html.ts
index 13705238a7..d010d23fae 100644
--- a/application/server/src/utils/render_app_html.ts
+++ b/application/server/src/utils/render_app_html.ts
@@ -18,6 +18,7 @@ const USER_POSTS_LIMIT = 8;
 type HydratedPost = {
   user?: { profileImage?: { id?: string | null } | null } | null;
   images?: Array<{ id: string }> | null;
+  movie?: { id: string } | null;
 };
 type HydratedConversation = {
   initiator: { id: string; profileImage?: { id?: string | null } | null };
@@ -71,6 +72,10 @@ function getProfileImagePath(profileImageId: string): string {
   return `/images/profiles/${profileImageId}.jpg`;
 }
 
+function getMoviePath(movieId: string): string {
+  return `/movies/${movieId}.gif`;
+}
+
 function serializeForInlineScript(value: unknown): string {
   return JSON.stringify(value).replace(/</g, "\\u003c");
 }
@@ -97,6 +102,10 @@ function addPostPreloads(
   }
   if (post.images?.[0]?.id) {
     preloads.add(getImagePath(post.images[0].id));
+    return;
+  }
+  if (post.movie?.id) {
+    preloads.add(getMoviePath(post.movie.id));
   }
 }
 
@@ -162,6 +171,9 @@ function renderTimelineShell(posts: Array<any>): string {
       const heroImage = post.images?.[0]?.id
         ? `<div class="relative mt-2 w-full"><div class="border-cax-border grid h-full w-full grid-cols-2 grid-rows-2 gap-1 overflow-hidden rounded-lg border" style="aspect-ratio:16 / 9"><div class="${post.images.length === 1 ? "col-span-2 row-span-2" : "col-span-1 row-span-2"} bg-cax-surface-subtle"><img alt="${escapeHtml(post.images[0].alt ?? "")}" class="h-full w-full object-cover" decoding="${index === 0 ? "sync" : "async"}" fetchpriority="${index === 0 ? "high" : "auto"}" loading="${index === 0 ? "eager" : "lazy"}" src="${getImagePath(post.images[0].id)}" /></div></div></div>`
         : "";
+      const heroMovie = !post.images?.[0]?.id && post.movie?.id
+        ? `<div class="relative mt-2 w-full"><div class="border-cax-border overflow-hidden rounded-lg border" style="aspect-ratio:1 / 1"><img alt="" class="h-full w-full object-cover" decoding="${index === 0 ? "sync" : "async"}" fetchpriority="${index === 0 ? "high" : "auto"}" loading="${index === 0 ? "eager" : "lazy"}" src="${getMoviePath(post.movie.id)}" /></div></div>`
+        : "";
 
       return [
         '<article class="hover:bg-cax-surface-subtle px-1 sm:px-4">',
@@ -176,6 +188,7 @@ function renderTimelineShell(posts: Array<any>): string {
         "</p>",
         `<div class="text-cax-text leading-relaxed">${escapeHtml(post.text ?? "")}</div>`,
         heroImage,
+        heroMovie,
         "</div>",
         "</div>",
         "</article>",
@@ -191,6 +204,9 @@ function renderPostShell(post: any): string {
   const heroImage = post.images?.[0]?.id
     ? `<div class="relative mt-2 w-full"><div class="border-cax-border grid h-full w-full grid-cols-2 grid-rows-2 gap-1 overflow-hidden rounded-lg border" style="aspect-ratio:16 / 9"><div class="${post.images.length === 1 ? "col-span-2 row-span-2" : "col-span-1 row-span-2"} bg-cax-surface-subtle"><img alt="${escapeHtml(post.images[0].alt ?? "")}" class="h-full w-full object-cover" decoding="sync" fetchpriority="high" loading="eager" src="${getImagePath(post.images[0].id)}" /></div></div></div>`
     : "";
+  const heroMovie = !post.images?.[0]?.id && post.movie?.id
+    ? `<div class="relative mt-2 w-full"><div class="border-cax-border overflow-hidden rounded-lg border" style="aspect-ratio:1 / 1"><img alt="" class="h-full w-full object-cover" decoding="sync" fetchpriority="high" loading="eager" src="${getMoviePath(post.movie.id)}" /></div></div>`
+    : "";
 
   return [
     '<article class="px-1 sm:px-4">',
@@ -207,6 +223,7 @@ function renderPostShell(post: any): string {
     '<div class="pt-2 sm:pt-4">',
     `<div class="text-cax-text text-xl leading-relaxed">${escapeHtml(post.text ?? "")}</div>`,
     heroImage,
+    heroMovie,
     "</div>",
     "</div>",
     "</article>",

From b1608227aeffd968340785c84201cc4db048073a Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 18:07:24 +0900
Subject: [PATCH 20/21] Reduce auth flow work and shrink prerender shell

---
 application/client/src/containers/AppContainer.tsx | 6 ++----
 application/server/src/routes/static.ts            | 8 +++++---
 application/server/src/utils/render_app_html.ts    | 4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/application/client/src/containers/AppContainer.tsx b/application/client/src/containers/AppContainer.tsx
index b6ac5ad024..1266dd4f38 100644
--- a/application/client/src/containers/AppContainer.tsx
+++ b/application/client/src/containers/AppContainer.tsx
@@ -1,6 +1,6 @@
 import { Suspense, lazy, useCallback, useEffect, useId, useRef, useState } from "react";
 import { HelmetProvider } from "react-helmet";
-import { Route, Routes, useLocation, useNavigate } from "react-router";
+import { Route, Routes, useLocation } from "react-router";
 
 import { AppPage } from "@web-speed-hackathon-2026/client/src/components/application/AppPage";
 import { AuthModalContainer } from "@web-speed-hackathon-2026/client/src/containers/AuthModalContainer";
@@ -23,7 +23,6 @@ const LazyCrokContainer = lazy(async () => {
 
 export const AppContainer = () => {
   const { pathname } = useLocation();
-  const navigate = useNavigate();
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname]);
@@ -106,8 +105,7 @@ export const AppContainer = () => {
   const handleLogout = useCallback(async () => {
     await sendJSON("/api/v1/signout", {});
     applyActiveUser(null);
-    navigate("/");
-  }, [applyActiveUser, navigate]);
+  }, [applyActiveUser]);
 
   const authModalId = useId();
   const newPostModalId = useId();
diff --git a/application/server/src/routes/static.ts b/application/server/src/routes/static.ts
index 6af418701f..768f72b620 100644
--- a/application/server/src/routes/static.ts
+++ b/application/server/src/routes/static.ts
@@ -11,20 +11,22 @@ export const staticRouter = Router();
 
 staticRouter.use(
   serveStatic(UPLOAD_PATH, {
-    maxAge: "1m",
+    immutable: true,
+    maxAge: "1y",
   }),
 );
 
 staticRouter.use(
   serveStatic(PUBLIC_PATH, {
-    maxAge: "1m",
+    immutable: true,
+    maxAge: "1y",
   }),
 );
 
 staticRouter.use(
   serveStatic(CLIENT_DIST_PATH, {
     index: false,
-    maxAge: "1m",
+    maxAge: "1h",
   }),
 );
 
diff --git a/application/server/src/utils/render_app_html.ts b/application/server/src/utils/render_app_html.ts
index d010d23fae..eadc0f04d3 100644
--- a/application/server/src/utils/render_app_html.ts
+++ b/application/server/src/utils/render_app_html.ts
@@ -163,7 +163,7 @@ function renderAppShell(content: string): string {
 
 function renderTimelineShell(posts: Array<any>): string {
   return posts
-    .slice(0, 2)
+    .slice(0, 1)
     .map((post, index) => {
       const profileImage = post.user?.profileImage?.id
         ? `<img alt="${escapeHtml(post.user.profileImage.alt ?? "")}" class="h-full w-full object-cover" decoding="${index === 0 ? "sync" : "async"}" fetchpriority="${index === 0 ? "high" : "auto"}" height="64" loading="${index === 0 ? "eager" : "lazy"}" src="${getProfileImagePath(post.user.profileImage.id)}" width="64" />`
@@ -232,7 +232,7 @@ function renderPostShell(post: any): string {
 
 function renderDmListShell(conversations: Array<any>, activeUserId: string): string {
   const items = conversations
-    .slice(0, 4)
+    .slice(0, 1)
     .map((conversation) => {
       const peer =
         conversation.initiator.id !== activeUserId ? conversation.initiator : conversation.member;

From d0abbe51cdb7c360d46e75a533a50ee2eea3d844 Mon Sep 17 00:00:00 2001
From: k-subaru by mac <k.subaru.nd80@gmail.com>
Date: Sat, 21 Mar 2026 18:27:25 +0900
Subject: [PATCH 21/21] Prevent DM reload races after optimistic sends

---
 .../src/containers/DirectMessageContainer.tsx | 84 +++++++++++++++----
 1 file changed, 67 insertions(+), 17 deletions(-)

diff --git a/application/client/src/containers/DirectMessageContainer.tsx b/application/client/src/containers/DirectMessageContainer.tsx
index 7738009cd5..f2f3ad5978 100644
--- a/application/client/src/containers/DirectMessageContainer.tsx
+++ b/application/client/src/containers/DirectMessageContainer.tsx
@@ -27,6 +27,8 @@ interface Props {
 
 export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
   const { conversationId = "" } = useParams<{ conversationId: string }>();
+  const optimisticMessagesRef = useRef<Models.DirectMessage[]>([]);
+  const optimisticRequestSeqRef = useRef(0);
 
   const [conversation, setConversation] = useState<Models.DirectMessageConversation | null>(null);
   const [conversationError, setConversationError] = useState<Error | null>(null);
@@ -35,6 +37,18 @@ export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
   const [isPeerTyping, setIsPeerTyping] = useState(false);
   const peerTypingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const mergeConversationMessages = useCallback(
+    (messages: Models.DirectMessage[]) => {
+      const seen = new Set(messages.map((message) => message.id));
+      const pending = optimisticMessagesRef.current.filter((message) => !seen.has(message.id));
+
+      return [...messages, ...pending].sort((a, b) => {
+        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      });
+    },
+    [],
+  );
+
   const loadConversation = useCallback(async () => {
     if (activeUser == null) {
       return;
@@ -44,13 +58,16 @@ export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
       const data = await fetchJSON<Models.DirectMessageConversation>(
         `/api/v1/dm/${conversationId}`,
       );
-      setConversation(data);
+      setConversation({
+        ...data,
+        messages: mergeConversationMessages(data.messages),
+      });
       setConversationError(null);
     } catch (error) {
       setConversation(null);
       setConversationError(error as Error);
     }
-  }, [activeUser, conversationId]);
+  }, [activeUser, conversationId, mergeConversationMessages]);
 
   const sendRead = useCallback(async () => {
     if (activeUser == null || conversationId === "") {
@@ -74,38 +91,71 @@ export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
       }
 
       setIsSubmitting(true);
+      const requestSeq = optimisticRequestSeqRef.current + 1;
+      optimisticRequestSeqRef.current = requestSeq;
+      const createdAt = new Date().toISOString();
+      const optimisticMessage = {
+        body: params.body,
+        createdAt,
+        id: `optimistic-${requestSeq}`,
+        isRead: false,
+        sender: {
+          id: activeUser.id,
+        },
+      } as Models.DirectMessage;
+      optimisticMessagesRef.current = [...optimisticMessagesRef.current, optimisticMessage];
+      setConversation((current) => {
+        if (current == null) {
+          return current;
+        }
+
+        return {
+          ...current,
+          messages: mergeConversationMessages([...current.messages, optimisticMessage]),
+        };
+      });
+
       try {
-        await sendJSON(`/api/v1/dm/${conversationId}/messages`, {
+        const sentMessage = await sendJSON<Models.DirectMessage>(`/api/v1/dm/${conversationId}/messages`, {
           body: params.body,
         });
-        const createdAt = new Date().toISOString();
+        optimisticMessagesRef.current = optimisticMessagesRef.current.filter(
+          (message) => message.id !== optimisticMessage.id,
+        );
         setConversation((current) => {
           if (current == null) {
             return current;
           }
 
+          const nextMessages = current.messages
+            .filter((message) => message.id !== optimisticMessage.id)
+            .concat(sentMessage);
           return {
             ...current,
-            messages: [
-              ...current.messages,
-              {
-                body: params.body,
-                createdAt,
-                id: `optimistic-${createdAt}`,
-                isRead: false,
-                sender: {
-                  id: activeUser.id,
-                },
-              } as Models.DirectMessage,
-            ],
+            messages: mergeConversationMessages(nextMessages),
           };
         });
         void loadConversation();
+      } catch (error) {
+        optimisticMessagesRef.current = optimisticMessagesRef.current.filter(
+          (message) => message.id !== optimisticMessage.id,
+        );
+        setConversation((current) => {
+          if (current == null) {
+            return current;
+          }
+
+          return {
+            ...current,
+            messages: current.messages.filter((message) => message.id !== optimisticMessage.id),
+          };
+        });
+        throw error;
       } finally {
         setIsSubmitting(false);
       }
     },
-    [activeUser, conversationId, loadConversation],
+    [activeUser, conversationId, loadConversation, mergeConversationMessages],
   );
 
   const handleTyping = useCallback(async () => {