diff --git a/app/components/note/Note.tsx b/app/components/note/Note.tsx
index 16ae684..d0d84d4 100644
--- a/app/components/note/Note.tsx
+++ b/app/components/note/Note.tsx
@@ -1,5 +1,7 @@
 import { Badge, Button, Card, Group, Stack, Text } from "@mantine/core";
 import { useMemo } from "react";
+import type { Tweet } from "react-tweet/api";
+import { EmbeddedTweet } from "react-tweet/patched/components/embedded-tweet";
 
 import { LANGUAGE_ID_TO_LABEL } from "../../feature/search/language";
 import {
@@ -14,9 +16,10 @@ import { NoteTopic } from "./NoteTopics";
 
 type NoteProps = {
   note: SearchedNote;
+  fetchedPost: Tweet | undefined;
 };
 
-export const Note = ({ note }: NoteProps) => {
+export const Note = ({ note, fetchedPost }: NoteProps) => {
   const dateString = useMemo(() => {
     return new Date(note.createdAt).toLocaleString("ja-JP", {
       year: "numeric",
@@ -60,7 +63,13 @@ export const Note = ({ note }: NoteProps) => {
             <NoteTopic topics={note.topics} />
           </div>
         </Stack>
-        <Post post={note.post} />
+        {note.post != null ? (
+          <Post post={note.post} />
+        ) : fetchedPost != null ? (
+          <div data-theme="light">
+            <EmbeddedTweet tweet={fetchedPost} />
+          </div>
+        ) : null}
         {isNonEmptyString(note.postId) && (
           <Group justify="flex-end">
             <Button
diff --git a/app/components/note/Notes.tsx b/app/components/note/Notes.tsx
index 23f78d5..7ef3537 100644
--- a/app/components/note/Notes.tsx
+++ b/app/components/note/Notes.tsx
@@ -1,17 +1,23 @@
 import { memo } from "react";
+import type { Tweet } from "react-tweet/api";
 
 import type { SearchedNote } from "../../generated/api/schemas";
 import { Note } from "./Note";
 
 type NotesProps = {
   notes: SearchedNote[];
+  fetchedPosts: Record<string, Tweet>;
 };
 
-export const Notes = memo(({ notes }: NotesProps) => {
+export const Notes = memo(({ notes, fetchedPosts }: NotesProps) => {
   return (
     <>
       {notes.map((note) => (
-        <Note key={note.noteId} note={note} />
+        <Note
+          fetchedPost={fetchedPosts[note.postId]}
+          key={note.noteId}
+          note={note}
+        />
       ))}
     </>
   );
diff --git a/app/root.tsx b/app/root.tsx
index 2467202..4555f51 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -15,8 +15,10 @@ import { mantineTheme } from "./config/mantine";
 dayjs.extend(customParseFormat);
 
 export function Layout({ children }: { children: React.ReactNode }) {
+  // mantine の <ColorSchemeScript /> がブラウザ上でのみ
+  // html に data-mantine-color-scheme を追加するので suppressHydrationWarning を付けている
   return (
-    <html lang="ja">
+    <html lang="ja" suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
         <meta content="width=device-width, initial-scale=1" name="viewport" />
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 1efc6d1..b084665 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,6 +1,7 @@
 import { parseWithZod } from "@conform-to/zod";
 import { Anchor, Card, Container, Divider, Group, Stack } from "@mantine/core";
 import { data, Link, redirect, useNavigation } from "react-router";
+import { getTweet, type Tweet } from "react-tweet/api";
 import { getQuery, withQuery } from "ufo";
 
 import Fa6SolidMagnifyingGlass from "~icons/fa6-solid/magnifying-glass";
@@ -13,7 +14,7 @@ import {
   getTopicsApiV1DataTopicsGet,
   searchApiV1DataSearchGet,
 } from "../generated/api/client";
-import type { SearchedNote, Topic } from "../generated/api/schemas";
+import { isNonEmptyString } from "../utils/string";
 import type { Route } from "./+types/_index";
 
 export const meta: Route.MetaFunction = () => {
@@ -58,6 +59,7 @@ export const loader = async (args: Route.LoaderArgs) => {
             },
           },
           topics: [],
+          fetchedPosts: {},
         },
         error: searchQuery.error.errors,
       },
@@ -74,11 +76,36 @@ export const loader = async (args: Route.LoaderArgs) => {
     searchApiV1DataSearchGet(searchQuery.data),
   ]);
 
+  for (const note of response.data.data) {
+    note.post = null;
+  }
+
+  const postIdsToFetch: string[] = [];
+  for (const note of response.data.data) {
+    // post が未取得で postId が存在する場合は BFF でポスト情報を一括 fetch したい
+    if (note.post != null || !isNonEmptyString(note.postId)) {
+      continue;
+    }
+    postIdsToFetch.push(note.postId);
+  }
+
+  const posts = await Promise.all(
+    postIdsToFetch.map(async (id) => getTweet(id)),
+  );
+  const postsMap: Record<string, Tweet> = {};
+  for (const post of posts) {
+    if (!post) {
+      continue;
+    }
+    postsMap[post.id_str] = post;
+  }
+
   return {
     data: {
       searchQuery: searchQuery.data,
       searchResults: response.data,
       topics: topics.data.data,
+      fetchedPosts: postsMap,
     },
     error: null,
   };
@@ -93,6 +120,7 @@ export default function Index({
   const {
     topics,
     searchQuery,
+    fetchedPosts,
     searchResults: { data: notes, meta: paginationMeta },
   } = loaderData.data;
 
@@ -111,10 +139,7 @@ export default function Index({
               <SearchForm
                 defaultValue={searchQuery ?? undefined}
                 lastResult={actionData}
-                topics={
-                  // react-router の型がうまく機能せず topics が unknown になったため
-                  topics as Topic[]
-                }
+                topics={topics}
               />
             </div>
             <Divider className="md:hidden" />
@@ -133,12 +158,7 @@ export default function Index({
                       />
                     )}
                     <Group gap="lg">
-                      <Notes
-                        notes={
-                          // react-router の型がうまく機能せず notes[number].topics が unknown になったため
-                          notes as SearchedNote[]
-                        }
-                      />
+                      <Notes fetchedPosts={fetchedPosts} notes={notes} />
                     </Group>
                     {searchQuery && (
                       <SearchPagination
diff --git a/eslint.config.ts b/eslint.config.ts
index 555cf98..f0f7a23 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -1,12 +1,12 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./eslint-typegen.d.ts" />
 
-import { FlatCompat } from "@eslint/eslintrc";
 import js from "@eslint/js";
 import type { Linter } from "eslint";
 import gitignore from "eslint-config-flat-gitignore";
 import jsxA11y from "eslint-plugin-jsx-a11y";
 import react from "eslint-plugin-react";
+import * as reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import simpleImportSort from "eslint-plugin-simple-import-sort";
 import typegen from "eslint-typegen";
@@ -18,8 +18,6 @@ const tsFiles = "**/*.{ts,tsx,mts,cts}";
 const jsFiles = "**/*.{js,jsx,mjs,cjs}";
 const jsxFiles = "**/*.{jsx,tsx}";
 
-const compat = new FlatCompat();
-
 const config = [
   gitignore(),
   {
@@ -106,7 +104,7 @@ const config = [
       react.configs.flat.recommended,
       // @ts-expect-error 型が合わない
       react.configs.flat["jsx-runtime"],
-      ...compat.extends("plugin:react-hooks/recommended"),
+      reactHooks.configs["recommended-latest"],
       reactRefresh.configs.vite,
       jsxA11y.flatConfigs.recommended,
     ],
diff --git a/package.json b/package.json
index a8eaf2d..d19c8d6 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "lint": "eslint --max-warnings 0",
     "format": "prettier --write .",
     "format:ci": "prettier --check .",
-    "start": "react-router-serve ./build/server/index.js",
+    "start": "react-router-serve ./build/server/nodejs_*/index.js",
     "typecheck": "pnpm run typegen && tsc --noEmit",
     "typegen": "react-router typegen",
     "orval": "orval",
@@ -39,6 +39,7 @@
     "react-dom": "19.0.0",
     "react-router": "7.3.0",
     "react-router-dom": "7.3.0",
+    "react-tweet": "3.2.2",
     "recharts": "2.15.1",
     "ufo": "1.5.4",
     "zod": "3.24.2"
@@ -91,7 +92,7 @@
   "engines": {
     "node": "^22.0.0"
   },
-  "packageManager": "pnpm@10.5.2",
+  "packageManager": "pnpm@10.6.1",
   "pnpm": {
     "onlyBuiltDependencies": [
       "esbuild",
@@ -99,6 +100,9 @@
     ],
     "overrides": {
       "react-is": "19.0.0"
+    },
+    "patchedDependencies": {
+      "react-tweet": "patches/react-tweet.patch"
     }
   }
 }
diff --git a/patches/react-tweet.patch b/patches/react-tweet.patch
new file mode 100644
index 0000000..edbb044
--- /dev/null
+++ b/patches/react-tweet.patch
@@ -0,0 +1,23 @@
+diff --git a/package.json b/package.json
+index 36145877a0f6bc95d2156afbc2c21ebbaeb1ba13..d4b6f8bcfbcd6e20e3f24ba68549d01762fef1fe 100644
+--- a/package.json
++++ b/package.json
+@@ -17,8 +17,17 @@
+       "default": "./dist/index.client.js"
+     },
+     "./api": "./dist/api/index.js",
+-    "./theme.css": "./dist/twitter-theme/theme.css"
++    "./theme.css": "./dist/twitter-theme/theme.css",
++    "./patched/components/embedded-tweet": {
++      "default": "./dist/twitter-theme/embedded-tweet.js",
++      "types": "./dist/twitter-theme/embedded-tweet.d.ts"
++    }
+   },
++  "//": [
++    "./patched/components/embedded-tweet is escape hatch to import EmbeddedTweet component.",
++    "import { EmbeddedTweet } from 'react-tweet' causes error in Vite + React Router",
++    "because it has double barrel file and import alanysis is not working properly."
++  ],
+   "files": [
+     "dist/**/*.{js,d.ts,css}"
+   ],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7b1f80d..f76f34e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,11 @@ settings:
 overrides:
   react-is: 19.0.0
 
+patchedDependencies:
+  react-tweet:
+    hash: 663217056fe4b337e0075c5fdd3a430943dc2fc437e29f60a70a3437edffdfcc
+    path: patches/react-tweet.patch
+
 importers:
 
   .:
@@ -71,6 +76,9 @@ importers:
       react-router-dom:
         specifier: 7.3.0
         version: 7.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react-tweet:
+        specifier: 3.2.2
+        version: 3.2.2(patch_hash=663217056fe4b337e0075c5fdd3a430943dc2fc437e29f60a70a3437edffdfcc)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       recharts:
         specifier: 2.15.1
         version: 2.15.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -1362,6 +1370,9 @@ packages:
     peerDependencies:
       '@svgr/core': '*'
 
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
   '@tailwindcss/node@4.0.12':
     resolution: {integrity: sha512-a6J11K1Ztdln9OrGfoM75/hChYPcHYGNYimqciMrvKXRmmPaS8XZTHhdvb5a3glz4Kd4ZxE1MnuFE2c0fGGmtg==}
 
@@ -3661,6 +3672,12 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
+  react-tweet@3.2.2:
+    resolution: {integrity: sha512-hIkxAVPpN2RqWoDEbo3TTnN/pDcp9/Jb6pTgiA4EbXa9S+m2vHIvvZKHR+eS0PDIsYqe+zTmANRa5k6+/iwGog==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
   react@19.0.0:
     resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
     engines: {node: '>=0.10.0'}
@@ -3979,6 +3996,11 @@ packages:
     resolution: {integrity: sha512-upi/0ZGkYgEcLeGieoz8gT74oWHA0E7JivX7aN9mAf+Tc7BQoRBvnIGHoPDw+f9TXTW4s6kGYCZJtauP6OYp7g==}
     hasBin: true
 
+  swr@2.3.3:
+    resolution: {integrity: sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -4263,6 +4285,11 @@ packages:
       '@types/react':
         optional: true
 
+  use-sync-external-store@1.4.0:
+    resolution: {integrity: sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -5796,6 +5823,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
   '@tailwindcss/node@4.0.12':
     dependencies:
       enhanced-resolve: 5.18.1
@@ -8262,6 +8293,14 @@ snapshots:
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  react-tweet@3.2.2(patch_hash=663217056fe4b337e0075c5fdd3a430943dc2fc437e29f60a70a3437edffdfcc)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      '@swc/helpers': 0.5.15
+      clsx: 2.1.1
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      swr: 2.3.3(react@19.0.0)
+
   react@19.0.0: {}
 
   readdirp@4.1.2: {}
@@ -8669,6 +8708,12 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  swr@2.3.3(react@19.0.0):
+    dependencies:
+      dequal: 2.0.3
+      react: 19.0.0
+      use-sync-external-store: 1.4.0(react@19.0.0)
+
   symbol-tree@3.2.4: {}
 
   tabbable@6.2.0: {}
@@ -8905,6 +8950,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.0.10
 
+  use-sync-external-store@1.4.0(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+
   util-deprecate@1.0.2: {}
 
   utility-types@3.11.0: {}
diff --git a/vite.config.ts b/vite.config.ts
index 1bb3c7b..de0ab7b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -16,4 +16,11 @@ export default defineConfig({
     }),
     tsconfigPaths(),
   ],
+
+  ssr: {
+    noExternal: [
+      // react-tweet 内部の css の import が壊れるので ssr.noExternal に含める
+      "react-tweet"
+    ],
+  },
 });
