Next.js Discord

Discord Forum

Pages Router: App is too slow, My Pages First Load JS between`950 kB` and `965 kB`

Unanswered
Yaman posted this in #help-forum
Open in Discord
YamanOP
hello, when I built my project I found that all my pages first load size were too big, which caused the app to take a quite long time to load the page even if the page does not have much content, just displaying some products.
In all my pages I am doing fetch on the server for better SSR, only the pages that I do not care about the SEO like user profile the fetch is client side
smth like:
export const getServerSideProps: GetServerSideProps = storeWrapper.getServerSideProps(
  (store) =>
    async ({ req, res, locale, query }) => {
      setTenantDomain(req);

      const { slug } = query;
      const session = await getServerSession(req, res, authOptions);

      setAuthToken(session?.access_token);

      await store.dispatch(fetchCourse(slug as string));

      if (!store.getState().courses.course) {
        return {
          notFound: true
        };
      }

      store.dispatch(fetchTenant.initiate());
      await Promise.all(store.dispatch(getRunningTenantQueries()));

      return {
        props: {
          ...(await serverSideTranslations(
            locale ?? i18nextConfig.i18n.defaultLocale,
            [
              "common",
              "course_player",
              "comments",
              "share",
              "reviews",
              "content_type",
              "chapter_contents",
              "validation"
            ],
            i18nextConfig
          ))
        }
      };
    }
);

I could not figure out how I could, decrease the load size.
can anyone help me with this please?

13 Replies

YamanOP
my package.json
"dependencies": {
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^3.1.0",
    "@msaaqcom/abjad": "^0.0.83-alpha.19",
    "@paypal/react-paypal-js": "^8.1.1",
    "@reduxjs/toolkit": "^1.9.5",
    "@sentry/nextjs": "^7.64.0",
    "axios": "^1.4.0",
    "can-deparam": "^1.2.3",
    "color-convert": "^2.0.1",
    "cookies-next": "^2.1.1",
    "dayjs": "^1.11.8",
    "file-saver": "^2.0.5",
    "focus-trap-react": "^10.2.1",
    "i18next": "^22.5.1",
    "i18next-chained-backend": "^4.4.0",
    "i18next-fs-backend": "^2.1.5",
    "i18next-http-backend": "^2.2.1",
    "i18next-localstorage-backend": "^4.1.1",
    "next": "13.4.3",
    "next-auth": "^4.22.1",
    "next-i18next": "^13.3.0",
    "next-redux-wrapper": "^8.1.0",
    "nprogress": "^0.2.0",
    "react": "18.2.0",
    "react-confirm": "^0.3.0-2",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.44.2",
    "react-i18next": "^12.3.1",
    "react-phone-input-2": "^2.15.1",
    "react-redux": "^8.0.5",
    "react-select": "^5.7.4",
    "react-toastify": "^9.1.3",
    "redux": "^4.2.1",
    "slugify": "^1.6.6",
    "swiper": "^10.0.4",
    "yup": "^1.2.0"
  },
Julienng
Hi! Even if you are not rendering a lot, you have dependencies loaded for those pages.

Like, those dependencies are 118kB :
- i18next
- i18next-chained-backend
- i18next-http-backend
- i18next-localstorage-backend
- react-i18next
- react-select
- react-toastify
- yup

The way to shrink that down is :
- use of dynamic loading : https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading
- reduce your dependencies if you can

To help you split on the correct part of your app with the dynamic function, you can analyze your bundle with something like :
https://github.com/webpack-contrib/webpack-bundle-analyzer

Nextjs has an official integration with that you can find here :
https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer
Julienng
The Nextjs has a hint already present to help you track down, if you look, you pages are quite small but you chunks are big for the "first load JS"

And one file is really big _app-4d06807f8f7275b6.js which feels like your _app file is importing quite a lot of your deps
Julienng
Additional information here :
I saw you are using MUI (@mui/material) from your reddit post and MUI is just a massive dep (> 500kB alone minified)
MUI has a recommendation to reduce bundle size here :
// move from
import { Button, TextField } from '@mui/material';

// to
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
This will help reduce your bundle size by excluding unused components from MUI
@Julienng https://mui.com/material-ui/guides/minimizing-bundle-size/#option-one-use-path-imports
YamanOP
I not using MUI, I am using an internally built component library,
but I think the component library I am using has a big effect to the size
here I am just using the Provider and I am doing very much in it
I will try to remove it and see it the _app.js size will be smaller
Julienng
OH! ok, I through while I was looking with the reddit link

YUP, seems like your lib is not working correctly for treeshaking right now
@Julienng OH! ok, I through while I was looking with the reddit link YUP, seems like your lib is not working correctly for treeshaking right now
YamanOP
yes, I agree, Whatever component I import it imports the same size even if it is just a div with a text, I will search how to fix the treeshaking thing and see what happens,
btw do you have any experience with vite?
because I am using it to build my library
Julienng
I do not have any exp on vite to build a lib sorry