hot reloading is better

nextjs/src/app/course/[courseName]/page.tsx

@@ -1,29 +1,16 @@
-"use client";
-import { useLocalCourseDetailsQuery } from "@/hooks/localCoursesHooks";
-import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
-import { getMonthsBetweenDates } from "./calendarMonthUtils";
-import CalendarMonth from "./calendarMonth";
+import CourseDetailsWrapper from "@/app/CourseDetailsWrapper";
+import { getDehydratedClient } from "@/app/layout";
+import { HydrationBoundary } from "@tanstack/react-query";
 
-
-export default function Page({
+export default async function CoursePage({
   params: { courseName },
 }: {
   params: { courseName: string };
 }) {
-  const { data: course } = useLocalCourseDetailsQuery(courseName);
-
-  const startDate = getDateFromStringOrThrow(course.settings.startDate);
-  const endDate = getDateFromStringOrThrow(course.settings.endDate);
-
-  const months = getMonthsBetweenDates(startDate, endDate);
+  const dehydratedState = await getDehydratedClient();
   return (
-    <div>
-      {course.settings.name}
-      <div>
-        {months.map((month) => (
-          <CalendarMonth key={month.month + "" + month.year} month={month} localCourse={course} />
-        ))}
-      </div>
-    </div>
+    <HydrationBoundary state={dehydratedState}>
+      <CourseDetailsWrapper courseName={courseName} />
+    </HydrationBoundary>
   );
 }