ページ管理機能を動的インポートに変更し、クライアントコンポーネントを追加しました。また、ページデータの取得ロジックを整理しました。 (#644)

ttizze · Feb 28, 2025 · b918d55 · b918d55
2 parents bfe4ee6 + ab62326
commit b918d55
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 43 deletions.
diff --git a/...gement/components/page-management-tab.tsx → ...components/page-management-tab/client.tsx b/...gement/components/page-management-tab.tsx → ...components/page-management-tab/client.tsx
@@ -8,20 +8,21 @@ import { Link } from "@/i18n/routing";
 import type { PageStatus } from "@prisma/client";
 import { EyeIcon } from "lucide-react";
 import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
-import type { PageWithTitleAndViewData } from "../db/queries.server";
-interface PageManagementTabProps {
+import type { PageWithTitleAndViewData } from "../../db/queries.server";
+
+interface PageManagementTabClientProps {
 	pagesWithTitleAndViewData: PageWithTitleAndViewData[];
 	totalPages: number;
 	currentPage: number;
 	handle: string;
 }
 
-export function PageManagementTab({
+export function PageManagementTabClient({
 	pagesWithTitleAndViewData,
 	totalPages,
 	currentPage,
 	handle,
-}: PageManagementTabProps) {
+}: PageManagementTabClientProps) {
 	const [query, setQuery] = useQueryState(
 		"query",
 		parseAsString.withOptions({

diff --git a/...]/(common-layout)/user/[handle]/page-management/components/page-management-tab/server.tsx b/...]/(common-layout)/user/[handle]/page-management/components/page-management-tab/server.tsx
@@ -0,0 +1,62 @@
+import { getGeoViewData } from "../../components/page-view-data/view-data";
+import { fetchPaginatedOwnPages } from "../../db/queries.server";
+import { PageManagementTabClient } from "./client";
+
+interface PageManagementTabProps {
+	currentUserId: string;
+	locale: string;
+	page: string;
+	query: string;
+	handle: string;
+}
+
+export async function PageManagementTab({
+	currentUserId,
+	locale,
+	page,
+	query,
+	handle,
+}: PageManagementTabProps) {
+	const { pagesWithTitle, totalPages, currentPage } =
+		await fetchPaginatedOwnPages(
+			currentUserId,
+			locale,
+			Number(page),
+			10,
+			query,
+		);
+	const pagesWithTitleAndViewData = await Promise.all(
+		pagesWithTitle.map(async (pageData) => {
+			const path = `/user/${handle}/page/${pageData.slug}`;
+			try {
+				const geoViewData = await getGeoViewData(path);
+				const totalViews = geoViewData.reduce(
+					(sum, item) => sum + item.views,
+					0,
+				);
+
+				return {
+					...pageData,
+					viewCount: totalViews,
+					geoViewData,
+				};
+			} catch (error) {
+				console.error(`Failed to fetch view data for ${path}:`, error);
+				return {
+					...pageData,
+					viewCount: 0,
+					geoViewData: [],
+				};
+			}
+		}),
+	);
+
+	return (
+		<PageManagementTabClient
+			pagesWithTitleAndViewData={pagesWithTitleAndViewData}
+			totalPages={totalPages}
+			currentPage={currentPage}
+			handle={handle}
+		/>
+	);
+}
diff --git a/next/src/app/[locale]/(common-layout)/user/[handle]/page-management/page.tsx b/next/src/app/[locale]/(common-layout)/user/[handle]/page-management/page.tsx
@@ -1,8 +1,27 @@
 import { getCurrentUser } from "@/auth";
+import { Skeleton } from "@/components/ui/skeleton";
+import dynamic from "next/dynamic";
 import { redirect } from "next/navigation";
-import { PageManagementTab } from "./components/page-management-tab";
-import { getGeoViewData } from "./components/page-view-data/view-data";
-import { fetchPaginatedOwnPages } from "./db/queries.server";
+
+const PageManagementTab = dynamic(
+	() =>
+		import("./components/page-management-tab/server").then(
+			(mod) => mod.PageManagementTab,
+		),
+	{
+		loading: () => (
+			<div className="flex flex-col gap-4">
+				<Skeleton className="h-[100px] w-full" />
+				<Skeleton className="h-[100px] w-full" />
+				<Skeleton className="h-[100px] w-full" />
+				<Skeleton className="h-[100px] w-full" />
+				<Skeleton className="h-[100px] w-full" />
+				<Skeleton className="h-[100px] w-full" />
+				<Skeleton className="h-[100px] w-full" />
+			</div>
+		),
+	},
+);
 export default async function PageManagementPage({
 	params,
 	searchParams,
@@ -19,39 +38,6 @@ export default async function PageManagementPage({
 	if (typeof page !== "string" || typeof query !== "string") {
 		throw new Error("Invalid page or query");
 	}
-	const { pagesWithTitle, totalPages, currentPage } =
-		await fetchPaginatedOwnPages(
-			currentUser.id,
-			locale,
-			Number(page),
-			10,
-			query,
-		);
-	const pagesWithTitleAndViewData = await Promise.all(
-		pagesWithTitle.map(async (pageData) => {
-			const path = `/user/${currentUser.handle}/page/${pageData.slug}`;
-			try {
-				const geoViewData = await getGeoViewData(path);
-				const totalViews = geoViewData.reduce(
-					(sum, item) => sum + item.views,
-					0,
-				);
-
-				return {
-					...pageData,
-					viewCount: totalViews,
-					geoViewData,
-				};
-			} catch (error) {
-				console.error(`Failed to fetch view data for ${path}:`, error);
-				return {
-					...pageData,
-					viewCount: 0,
-					geoViewData: [],
-				};
-			}
-		}),
-	);
 
 	return (
 		<div className="mx-auto max-w-4xl py-10">
@@ -64,9 +50,10 @@ export default async function PageManagementPage({
 
 			{/* <TabsContent value="page-management"> */}
 			<PageManagementTab
-				pagesWithTitleAndViewData={pagesWithTitleAndViewData}
-				totalPages={totalPages}
-				currentPage={currentPage}
+				currentUserId={currentUser.id}
+				locale={locale}
+				page={page}
+				query={query}
 				handle={currentUser.handle}
 			/>
 			{/* </TabsContent> */}