feat: books fetch on SSR in book reader

src/app/books/[bookId]/page.tsx

@@ -1,13 +1,36 @@
 import { Suspense } from "react";
 import { ClientBookPage } from "@/components/reader/ClientBookPage";
 import { BookSkeleton } from "@/components/skeletons/BookSkeleton";
+import { BookService } from "@/lib/services/book.service";
+import { ERROR_CODES } from "@/constants/errorCodes";
+import { AppError } from "@/utils/errors";
+import { redirect } from "next/navigation";
 
 export default async function BookPage({ params }: { params: Promise<{ bookId: string }> }) {
   const { bookId } = await params;
 
-  return (
-    <Suspense fallback={<BookSkeleton />}>
-      <ClientBookPage bookId={bookId} />
-    </Suspense>
-  );
+  try {
+    // SSR: Fetch directly on server instead of client-side XHR
+    const data = await BookService.getBook(bookId);
+    const nextBook = await BookService.getNextBook(bookId, data.book.seriesId);
+
+    return (
+      <Suspense fallback={<BookSkeleton />}>
+        <ClientBookPage bookId={bookId} initialData={{ ...data, nextBook }} />
+      </Suspense>
+    );
+  } catch (error) {
+    // If config is missing, redirect to settings
+    if (error instanceof AppError && error.code === ERROR_CODES.KOMGA.MISSING_CONFIG) {
+      redirect("/settings");
+    }
+
+    // Pass error to client component
+    const errorCode = error instanceof AppError ? error.code : ERROR_CODES.BOOK.NOT_FOUND;
+    return (
+      <Suspense fallback={<BookSkeleton />}>
+        <ClientBookPage bookId={bookId} initialError={errorCode} />
+      </Suspense>
+    );
+  }
 }

src/components/reader/ClientBookPage.tsx

@@ -10,9 +10,15 @@ import logger from "@/lib/logger";
 
 interface ClientBookPageProps {
   bookId: string;
+  initialData?: {
+    book: KomgaBook;
+    pages: number[];
+    nextBook: KomgaBook | null;
+  };
+  initialError?: string;
 }
 
-export function ClientBookPage({ bookId }: ClientBookPageProps) {
+export function ClientBookPage({ bookId, initialData, initialError }: ClientBookPageProps) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [data, setData] = useState<{
@@ -21,6 +27,22 @@ export function ClientBookPage({ bookId }: ClientBookPageProps) {
     nextBook: KomgaBook | null;
   } | null>(null);
 
+  // Use SSR data if available
+  useEffect(() => {
+    if (initialData) {
+      setData(initialData);
+      setLoading(false);
+      return;
+    }
+    if (initialError) {
+      setError(initialError);
+      setLoading(false);
+      return;
+    }
+    fetchBookData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bookId, initialData, initialError]);
+
   const fetchBookData = async () => {
     try {
       setLoading(true);
@@ -43,11 +65,6 @@ export function ClientBookPage({ bookId }: ClientBookPageProps) {
     }
   };
 
-  useEffect(() => {
-    fetchBookData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bookId]);
-
   const handleRetry = () => {
     fetchBookData();
   };