Мой проект NEXTJS загружает так много модулей, когда я нажимаю ссылку на страницу

У меня есть небольшой проект nextjs, но каждый раз, когда я запускаю его в первый раз, когда я нажимаю ссылку, перехожу на свою страницу, например: home/product/[slug], мне приходится ждать около 12 секунд, чтобы загрузить больше, чем компиляция 2000 модулей. . вот код, проверьте его, спасибо, что прочитали и помогли мне

// page.tsx (app)
'use client'
import SideBar from "@/components/SideBar/SideBar";
import Header from "@/components/Header/Header";

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <div className = "flex ">
            <div className = "lg:block hidden">
                <SideBar />
            </div>
            <div className = "lg:pl-64 pl-0 flex w-full h-full min-h-screen flex-col  bg-slate-300">
                <Header />
                <div className = "flex-1 text-black p-1 ">
                    {children}
                </div>
            </div>
        </div>
    );
}

это продукт/[продукт] и его комплектация (2900 модулей)

//app/prodcut/[slug]
"use client"
import { productSchema } from '@/components/CRUDTAB/validatorComponent'
import {AddProductField } from '@/data/ComponentData'
import {apiAddProduct } from '@/data/apiUrl'
import { columnProduct } from '@/data/listData';
import GetListComponent from '@/components/List/GetListComponent';


export default function page({ params }: { params: { slug: string } }) {
  return (
    <div>
      <GetListComponent
        slug = {'product'}
        querySlug = {'get'}
        columnData = {columnProduct}
        AddDataField = {AddProductField}
        dataSchema = {productSchema}
        apiAddData = {apiAddProduct} />
    </div>
  )


}

// GetListComponent.tsx
"use client"
import { useSearchParams } from 'next/navigation'
import React, { useEffect, useState } from 'react'
import LoadingScene from '@/components/LoadingScene'
import DataTable from '@/components/DataTable/DataTable'
import AddComponent from '@/components/CRUDTAB/AddComponent'
import getData from './getData'
type Props = {
  slug: string,
  querySlug:string,
  columnData:any,
  AddDataField:any,
  dataSchema:any,
  apiAddData:string
}

export default function GetListComponent(props: Props) {
  const searchParams = useSearchParams();
  const size = searchParams.get('size');
  const page = searchParams.get('page');
  const [data, setData] = useState<object[]>([])
  const [loading,setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await getData(props.slug,props.querySlug, size, page);
        console.info("result",result)
        setData(result);
      } catch (error) {
        setData([]);
      }
    };

    fetchData();
    setLoading(false);
  }, [props.querySlug, size, page]);
  const [openAdd, setOpenAdd] = useState(false);
  return (
    <div className='w-full h-full flex flex-col'>
      {props.slug}
      <div className='m-5'>
        <button onClick = {() => setOpenAdd(!openAdd)} className = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          Add Customer
        </button>
      </div>
      {loading ? <LoadingScene /> : <DataTable columns = {props.columnData} rows = {data} slug = {props.slug} />}
      <div>
        {openAdd && <AddComponent componentData = {props.AddDataField} validValueSchema = {props.dataSchema} slug = {'Cutomer'} setOpen = {setOpenAdd} apiUrl = {props.apiAddData} />}
      </div>
    </div>
  )
}

Как сделать быструю загрузку