Refactor code structure for improved readability and maintainability

app/the-loai/[slug]/page.tsx

@@ -4,6 +4,8 @@ import { prisma } from "@/lib/prisma"
 import { NovelCard } from "@/components/novel-card"
 import { notFound } from "next/navigation"
 
+export const dynamic = "force-dynamic"
+
 export default async function GenreDetailPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params
 
@@ -25,7 +27,8 @@ export default async function GenreDetailPage({ params }: { params: Promise<{ sl
     },
     orderBy: {
       updatedAt: "desc"
-    }
+    },
+    take: 20
   })
 
   // Basic layout without sort for purely server side representation without search params. Optional searchParams can be added later if needed.

app/the-loai/page.tsx

@@ -15,14 +15,22 @@ const iconMap: Record<string, React.ReactNode> = {
   Shield: <Shield className="h-6 w-6" />,
 }
 
+export const dynamic = "force-dynamic"
+
 export default async function GenresPage() {
-  const genres = await prisma.genre.findMany({
-    include: {
-      _count: {
-        select: { novels: true }
+  let genres: any[] = []
+
+  try {
+    genres = await prisma.genre.findMany({
+      include: {
+        _count: {
+          select: { novels: true }
+        }
       }
-    }
-  })
+    })
+  } catch (error) {
+    console.error("Failed to fetch genres during build/runtime", error)
+  }
 
   return (
     <div className="mx-auto max-w-6xl px-4 py-6">