動的インポートを使用してコンポーネントのローディング状態を追加し、いくつかのコンポーネントを最適化しました

next/package.json

@@ -56,7 +56,6 @@
 		"@tiptap/react": "2.11.5",
 		"@tiptap/starter-kit": "2.11.5",
 		"@types/ws": "8.5.14",
-		"bullmq": "5.40.2",
 		"class-variance-authority": "0.7.1",
 		"cld3-asm": "4.0.0",
 		"clsx": "2.1.1",
@@ -75,7 +74,7 @@
 		"next-themes": "0.4.4",
 		"nextjs-toploader": "3.7.15",
 		"nuqs": "2.3.2",
-		"p-limit": "^6.2.0",
+		"p-limit": "6.2.0",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
 		"react-icons": "5.4.0",

next/src/app/[locale]/(common-layout)/page.tsx

@@ -1,13 +1,21 @@
 import { getCurrentUser } from "@/auth";
 
+import { Skeleton } from "@/components/ui/skeleton";
 import type { Metadata } from "next";
 import dynamic from "next/dynamic";
 const PagesListTab = dynamic(
 	() => import("@/app/[locale]/components/pages-list-tab/index"),
+	{
+		loading: () => <Skeleton className="h-[200px] w-full" />,
+	},
 );
 const HeroSection = dynamic(
 	() => import("@/app/[locale]/components/hero-section/index"),
+	{
+		loading: () => <Skeleton className="h-[400px] w-full" />,
+	},
 );
+
 export const metadata: Metadata = {
 	title: "Evame - Home - Latest Pages",
 	description:

next/src/app/[locale]/(common-layout)/search/page.tsx

@@ -1,14 +1,20 @@
 import type { SanitizedUser } from "@/app/types";
+import { Skeleton } from "@/components/ui/skeleton";
 import type { Tag } from "@prisma/client";
+import dynamic from "next/dynamic";
 import {
 	searchByTag,
 	searchContent,
 	searchTags,
 	searchTitle,
 	searchUsers,
 } from "./db/queries.server";
-import { SearchPageClient } from "./search.client";
-
+const DynamicSearchPageClient = dynamic(
+	() => import("./search.client").then((mod) => mod.SearchPageClient),
+	{
+		loading: () => <Skeleton className="h-[500px] w-full" />,
+	},
+);
 const PAGE_SIZE = 10;
 
 export default async function Page({
@@ -31,7 +37,9 @@ export default async function Page({
 		typeof page !== "string" ||
 		typeof tagPage !== "string"
 	) {
-		return <SearchPageClient pages={[]} tags={[]} users={[]} totalPages={0} />;
+		return (
+			<DynamicSearchPageClient pages={[]} tags={[]} users={[]} totalPages={0} />
+		);
 	}
 
 	const skip = (Number(page) - 1) * PAGE_SIZE;
@@ -104,7 +112,7 @@ export default async function Page({
 	const totalPages = Math.ceil(totalCount / take);
 
 	return (
-		<SearchPageClient
+		<DynamicSearchPageClient
 			pages={pages}
 			tags={tags}
 			users={users}

next/src/app/[locale]/(common-layout)/user/[handle]/page/[slug]/components/content-with-translations.tsx

@@ -45,7 +45,7 @@ interface ContentWithTranslationsProps {
 	pageAITranslationInfo: PageAITranslationInfo[];
 }
 
-export function ContentWithTranslations({
+export async function ContentWithTranslations({
 	pageWithTranslations,
 	currentHandle,
 	userAITranslationInfo,

next/src/app/[locale]/(common-layout)/user/[handle]/page/[slug]/page.tsx

@@ -4,13 +4,13 @@ import { fetchPageWithTranslations } from "@/app/[locale]/db/queries.server";
 import { stripHtmlTags } from "@/app/[locale]/lib/strip-html-tags";
 import { BASE_URL } from "@/app/constants/base-url";
 import { getCurrentUser } from "@/auth";
+import { Skeleton } from "@/components/ui/skeleton";
 import { getGuestId } from "@/lib/get-guest-id";
 import { MessageCircle } from "lucide-react";
 import type { Metadata } from "next";
 import dynamic from "next/dynamic";
 import { notFound } from "next/navigation";
 import { cache } from "react";
-import { ContentWithTranslations } from "./components/content-with-translations";
 import { TranslateTarget } from "./constants";
 import {
 	fetchIsLikedByUser,
@@ -19,6 +19,15 @@ import {
 	fetchPageCommentsCount,
 } from "./db/queries.server";
 import { buildAlternateLocales } from "./lib/build-alternate-locales";
+const DynamicContentWithTranslations = dynamic(
+	() =>
+		import("./components/content-with-translations").then(
+			(mod) => mod.ContentWithTranslations,
+		),
+	{
+		loading: () => <Skeleton className="h-[500px] w-full" />,
+	},
+);
 const DynamicLikeButton = dynamic(
 	() =>
 		import("@/app/[locale]/components/like-button/client").then(
@@ -188,7 +197,7 @@ export default async function Page({ params }: { params: Params }) {
 	return (
 		<div className="w-full max-w-3xl mx-auto">
 			<article className="w-full prose dark:prose-invert prose-a:underline  sm:prose lg:prose-lg mx-auto px-4 mb-20">
-				<ContentWithTranslations
+				<DynamicContentWithTranslations
 					pageWithTranslations={pageWithTranslations}
 					currentHandle={currentUser?.handle}
 					userAITranslationInfo={userAITranslationInfo}