feat: refactor article components to use searchParams for pagination and improve content loading

next.config.ts

@@ -10,6 +10,7 @@ const nextConfig: NextConfig = {
             },
         ];
     },
+    cacheComponents: true,
 };
 
 export default nextConfig;

src/app/(pages)/article/[slug]/page.tsx

@@ -10,6 +10,10 @@ interface ArticlePageProps {
     params: Promise<{ slug: string }>;
 }
 
+interface ArticleContentProps {
+    params: Promise<{ slug: string }>;
+}
+
 function readingTime(text: string): number {
     const words = text.trim().split(/\s+/).length;
     return Math.max(1, Math.ceil(words / 200));
@@ -64,7 +68,8 @@ const ArticleContentSkeleton = () => (
     </article>
 );
 
-const ArticleContent = async ({ slug }: { slug: string }) => {
+const ArticleContent = async ({ params }: ArticleContentProps) => {
+    const { slug } = await params;
     const article = await getArticleBySlug(slug);
 
     if (!article) notFound();
@@ -137,12 +142,10 @@ const ArticleContent = async ({ slug }: { slug: string }) => {
     );
 };
 
-const ArticlePage = async ({ params }: ArticlePageProps) => {
-    const { slug } = await params;
-
+const ArticlePage = ({ params }: ArticlePageProps) => {
     return (
         <Suspense fallback={<ArticleContentSkeleton />}>
-            <ArticleContent slug={slug} />
+            <ArticleContent params={params} />
         </Suspense>
     );
 };

src/app/(pages)/home/page.tsx

@@ -37,11 +37,14 @@ const ArticleListSkeleton = () => (
 );
 
 interface ArticleListProps {
-    page: number;
-    pageSize: number;
+    searchParams: Promise<{ page?: string; pageSize?: string }>;
 }
 
-const ArticleList = async ({ page, pageSize }: ArticleListProps) => {
+const ArticleList = async ({ searchParams }: ArticleListProps) => {
+    const { page: pageParam, pageSize: pageSizeParam } = await searchParams;
+    const page = Math.max(1, Number(pageParam) || 1);
+    const pageSize = Number(pageSizeParam) || PAGE_SIZE;
+
     const {
         data: articles,
         totalPages,
@@ -94,10 +97,6 @@ type HomeProps = {
 };
 
 const Home = async ({ searchParams }: HomeProps) => {
-    const { page: pageParam, pageSize: pageSizeParam } = await searchParams;
-    const page = Math.max(1, Number(pageParam) || 1);
-    const pageSize = Number(pageSizeParam) || PAGE_SIZE;
-
     return (
         <div className='container mx-auto w-full flex-1 px-4 py-12 md:py-16'>
             <div className='mb-10 border-b border-border pb-8'>
@@ -109,7 +108,7 @@ const Home = async ({ searchParams }: HomeProps) => {
                 </h1>
             </div>
             <Suspense fallback={<ArticleListSkeleton />}>
-                <ArticleList page={page} pageSize={pageSize} />
+                <ArticleList searchParams={searchParams} />
             </Suspense>
         </div>
     );