I am getting a fiarly large First Load JS, I am trying to lazy load..

Question

I am getting a huge first load JS of 7.5mb .... I tthought I was following lazyloading patterns but maybe not?

utility file:

import { redirect } from "next/navigation";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";

const getPermissions = async () => {
  const { getPermissions } = getKindeServerSession();
  const permissions = await getPermissions();
  if (!permissions) {
    return [];
  }
  return permissions.permissions;
};

const getUser = async () => {
  const { getUser } = getKindeServerSession();

  return await getUser();
};

const checkPermission = async (
  permission,
  redirectTo = "/?message=noperm",
  type = null
) => {
  if (!type) {
    type = "push";
  }
  const permissions = await getPermissions();

  if (!permissions.includes(permission)) {
    redirect(redirectTo, type);
  }
};

export { checkPermission };

and in my page component...

import dynamic from "next/dynamic";
import { checkPermission } from '@/utilities/permissions';

const DomainsList = dynamic(
  () => import("@/components/domain/DomainsList"),
  {
    loading: () => <p>Loading...</p>,
    ssr: false,
  }
);


export default async function Home() {
  await checkPermission("domain");

  return <DomainsList />;
}

Loading...

, ssr: false, } ); export default async function Home() { await checkPermission("domain"); return ; }

American Crow · Answer

Afaik lazy loading only defers the component code until it's rendered for the first time.
Your <DomainList /> is always rendered.
Test to conditionally render your buttonIsClicked && <DomainsList /> that should exclude it from the initial clientside package.
When i remember correctly if it's under the fold it would also work.

I am getting a fiarly large First Load JS, I am trying to lazy load..

2 Replies