perf: dynamic import viewer three.js (tách khỏi bundle chính)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/co-vat/AntiquityShowcaseClient.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { Antiquity } from "@/app/content";
+
+const AntiquityShowcase = dynamic(
+  () => import("@/app/components/antiquity/AntiquityShowcase").then((m) => m.AntiquityShowcase),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="mx-auto max-w-7xl px-4 py-16 text-center text-sm text-[var(--muted-foreground)] sm:px-6">
+        Đang tải phòng trưng bày 3D…
+      </div>
+    ),
+  },
+);
+
+export default function AntiquityShowcaseClient({ items }: { items: Antiquity[] }) {
+  return <AntiquityShowcase items={items} />;
+}

src/app/co-vat/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import Image from "next/image";
 import { Boxes, ScanLine, Sparkles } from "lucide-react";
-import { AntiquityShowcase } from "@/app/components/antiquity/AntiquityShowcase";
+import AntiquityShowcaseClient from "./AntiquityShowcaseClient";
 import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
 import { SiteFooter } from "@/app/components/landing/SiteFooter";
 import { SiteHeader } from "@/app/components/landing/SiteHeader";
@@ -40,7 +40,7 @@ export default function AntiquityPage() {
         </div>
       </section>
 
-      <AntiquityShowcase items={antiquities} />
+      <AntiquityShowcaseClient items={antiquities} />
 
       <section className="border-t border-[var(--surface-border)] bg-[var(--surface-band)]">
         <div className="mx-auto grid max-w-7xl gap-4 px-4 py-14 sm:px-6 md:grid-cols-3 lg:py-18">

src/app/tour/chua-thai-lac/TourClient.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const VirtualTour = dynamic(() => import("@/app/components/VirtualTour"), {
+  ssr: false,
+  loading: () => (
+    <div className="grid min-h-[100dvh] place-items-center bg-[#f5f1e6] text-[#4a3f35]">
+      <p className="text-sm font-bold">Đang tải không gian 360°…</p>
+    </div>
+  ),
+});
+
+export default function TourClient({ tourId }: { tourId?: string }) {
+  return <VirtualTour tourId={tourId} />;
+}

src/app/tour/chua-thai-lac/page.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import VirtualTour from "@/app/components/VirtualTour";
+import TourClient from "./TourClient";
 
 export const metadata: Metadata = {
   title: "VR360 Chùa Thái Lạc (Pháp Vân tự)",
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function ChuaThaiLacTourPage() {
-  return <VirtualTour tourId="chua-thai-lac" />;
+  return <TourClient tourId="chua-thai-lac" />;
 }