diff --git a/app/page.tsx b/app/page.tsx
index a8e9875..d34fa5c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,19 @@
+import { connection } from "next/server";
+import { Suspense } from "react";
+
 import { LiveRefresh } from "@/components/live-refresh";
 import { SiteFooter } from "@/components/public/site-footer";
 import { StructuredDirectory } from "@/components/public/structured-directory";
 import { SiteHeader } from "@/components/public/site-header";
 import { getCachedPublicGuideCards } from "@/lib/cache/public";
 
-export default async function HomePage() {
+async function DirectoryContent() {
+  await connection();
   const guides = await getCachedPublicGuideCards();
+  return <StructuredDirectory guides={guides} />;
+}
+
+export default function HomePage() {
   return (
     <div className="flex min-h-svh flex-col bg-background">
       <LiveRefresh endpoint="/api/events/directory" />
@@ -19,7 +27,9 @@ export default async function HomePage() {
             ไกด์ตัวละคร อาวุธ อาร์ติแฟกต์ กลุ่มดาว และคำนวณทีม
           </p>
         </header>
-        <StructuredDirectory guides={guides} />
+        <Suspense fallback={<div className="min-h-svh" aria-hidden="true" />}>
+          <DirectoryContent />
+        </Suspense>
       </main>
       <SiteFooter />
     </div>
diff --git a/tests/public-performance.test.ts b/tests/public-performance.test.ts
index 84bae5a..94909ec 100644
--- a/tests/public-performance.test.ts
+++ b/tests/public-performance.test.ts
@@ -14,8 +14,10 @@ describe("public rendering performance", () => {
     ]);
 
     expect(layout).not.toContain("export const instant = false");
-    expect(page).not.toContain("connection()");
     expect(page).not.toContain("export const instant = false");
+    expect(page).toContain("async function DirectoryContent()");
+    expect(page).toContain("await connection()");
+    expect(page).toContain('fallback={<div className="min-h-svh"');
   });
 
   it("isolates request-time header authentication", async () => {