Improve NextJS Compilation Time (Development) | Next.js | Page 1

livid yew Sep 13, 2023, 2:56 PM

#

Hey guys I am currently working on a simple NextJS project, with Typescript, that displays a list of lectures and their details. I use tailwindcss for most of my styles to improve performance and Chakra-UI for some parts of my NavigationBar. In Addition, I use DaisyUI for its themes (dark and light mode).

For some reason the compilation time of my project is pretty high, for example, while running npm run dev the compilation time for a page is about ~5 seconds according to the terminal. For the user, in this case, me, it sometimes takes around 9 seconds to load a simple page, that only shows a staticly inserted text. (route: /secureAuth, branch: next-auth-setup) Below I will provide some screenshots of both the terminal-logs and the page in question.

My question is whether this compilation time is considered to be normal and or how to lower the compilation to increase performance?
(Side question in case someone has done this, can I only use the themes provided by daisyUI, and exclude its components to reduce the amount of modules that are compiled?)

Repository / Codebase: https://github.com/Marty-Byrde/PublicServices

Thanks in advance

GitHub

GitHub - Marty-Byrde/PublicServices

Contribute to Marty-Byrde/PublicServices development by creating an account on GitHub.

past kestrelBOT Sep 13, 2023, 2:56 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

grand heart Sep 13, 2023, 3:43 PM

#

That does seem pretty long!

#

Is there a reason you are using an ancient version of next?

#

Also, it might be worth stronly considering using WSL to develop on Windows instead of running it directly

livid yew Sep 13, 2023, 3:52 PM

#

The version of next is that low because I it was the first version I used, given that it is beta some things may change, thats why I haven't upgraded for now.

#

As for running it on windows, thats only the case for running it as a dev, when its running on production, then its run on a linux machine on my server.

livid yew Sep 13, 2023, 3:54 PM

#

grand heart That does seem pretty long!

Thats what I thought, my first guess on how to solve this was to reduce the daisyUI package, as I essentially only use its themes and functionality to style elements for light and darkmodes on the server (e.g. text-sky-700 dark:text-sky-400). However, I haven't yet figured out how to do so...

final kernel Sep 13, 2023, 4:01 PM

#

there has been improvements to dev compilation time in newer versions so i'd suggest trying to upgrade

livid yew Sep 13, 2023, 4:03 PM

#

That's good to know thanks. I will try to do upgrade and report back once I did.

tacit solstice Sep 13, 2023, 4:21 PM

#

Yes @livid yew , either run the upgrade command in terminal in current project, or even better to truly view the problem side by side, quickly clone your repo to a separate project and try running your existing compiler against the one in latest 13.4, etc.

livid yew Sep 13, 2023, 4:36 PM

#

So i have updated next to 19.4.19 locally. Opening the same page results in nearly the same compilation time of about 4.5 seconds based on the terminal and about 7 seconds in the browser.

acoustic zinc Sep 13, 2023, 4:37 PM

#

is /secureAuth/page async?

livid yew Sep 13, 2023, 4:39 PM

#

Yes, but it only awaits the 'fetch' request of the current session from next-auth.

acoustic zinc Sep 13, 2023, 4:39 PM

#

ok run a timer on that fetch request / getServerSession

#

class Audit {
  private _start: number = performance.now()
  private _end: number | null = null
  getSec() {
    this._end = performance.now()
    return ((this._end - this._start) / 1000)
  }
}

#

also what codelens are you using? its cute looking

livid yew Sep 13, 2023, 4:42 PM

#

It takes about 239ms

acoustic zinc Sep 13, 2023, 4:43 PM

#

hmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

#

thats odd

#

what about app/secureAuth/layout.tsx
and app/layout.tsx
(any parent layout)

livid yew Sep 13, 2023, 4:45 PM

#

So the secureAuth page it self does not have a layout file but the RootLayout /parent layout looks like this:
https://github.com/Marty-Byrde/PublicServices/blob/main/app/layout.tsx

GitHub

PublicServices/app/layout.tsx at main · Marty-Byrde/PublicServices

Contribute to Marty-Byrde/PublicServices development by creating an account on GitHub.

acoustic zinc Sep 13, 2023, 4:46 PM

#

didnt see anything that would block the render so we can rule out async/await loads

livid yew Sep 13, 2023, 4:49 PM

#

So I have set the root layout to:

export default async function RootLayout({ children, }: { children: React.ReactNode }) {
  const background = 'bg-stone-100/90 dark:bg-base-100'

  return (
    <html lang='en' data-theme='halloween' className='dark '>
      <body>
      {children}
      </body>
    </html>
  )
}

To check whether it impacts the performance. And the compilation time is a bit lower at ~4.5 seconds. But I'd say this is still too long, isnt it?

acoustic zinc Sep 13, 2023, 4:51 PM

#

does it only apply to this particular route?

livid yew Sep 13, 2023, 4:51 PM

#

No it applies to all routes, in fact the compilation time increases on my other routes that are "more complex", that means display actual data

acoustic zinc Sep 13, 2023, 4:51 PM

#

oh

#

try reproducing the bug without daisy UI?

#

is the package that you sent complete? i didnt see /secureAuth/page.tsx

livid yew Sep 13, 2023, 4:53 PM

#

Its on a seperate branch called 'next-auth-setup". The current changes, Next 13.4.19, are not yet pushed

acoustic zinc Sep 13, 2023, 4:53 PM

#

if you're ready to send a reproduction repository maybe i can set it up on my machine and see if it still persist

livid yew Sep 13, 2023, 4:54 PM

#

I will push the current changes to separate branch with a template .env file, so you are able to run it on your maschine

acoustic zinc Sep 13, 2023, 4:55 PM

#

thank you

livid yew Sep 13, 2023, 5:09 PM

#

I have now pushed all the recent changes to github into the 'Debug-Main' Branch. Note, that the compilation time bug occours when the secureAuth page is opened for the first time.
https://github.com/Marty-Byrde/PublicServices/tree/Debug-Main

GitHub

GitHub - Marty-Byrde/PublicServices at Debug-Main

Contribute to Marty-Byrde/PublicServices development by creating an account on GitHub.

grand heart Sep 14, 2023, 1:31 AM

#

Can you try something like this to see if next-auth is being slow?

console.time('getServerSession')
const session = await getServerSession(options)
console.timeEnd('getServerSession')

acoustic zinc Sep 14, 2023, 1:36 AM

#

grand heart Can you try something like this to see if next-auth is being slow? ```js consol...

already did

#

it only took 300ms #1151531787059740764 message

grand heart Sep 14, 2023, 1:42 AM

#

@acoustic zinc Are you reproducing the long build time at all? It might be something unusually about their next-auth configuration

acoustic zinc Sep 14, 2023, 1:43 AM

#

grand heart <@194128415954173952> Are you reproducing the long build time at all? It might b...

sorry i just woke up but thanks for reminding me xD

acoustic zinc Sep 14, 2023, 2:25 AM

#

I can't reproduce the issue

#

i updated next.js to latest and removed "campus-scraper": "^1.0.8", and "mongodb_handler": "^1.0.9", since i can't install it

livid yew Sep 14, 2023, 6:22 AM

#

acoustic zinc i updated next.js to latest and removed "campus-scraper": "^1.0.8", and ...

Sorry didnt think about those two packages, they are on a private npm registry. I will remove them so that you can install the remaining packages

livid yew Sep 14, 2023, 6:47 AM

#

I have now pushed the project without the campus-scraper and mongodb-handler packages to the 'Debug-Main' Branch. I have also updated the package-lock to no longer use my private-registry server, but instead use the npm-registry. I have also tested the behaviour of the project on a newly cloned directory and i think it should be now possbiel to easily reproduce the issue in question. If you face any difficulties please let me know

final kernel Sep 14, 2023, 7:47 AM

#

everything seems fine to me?

livid yew Sep 14, 2023, 7:47 AM

#

yes, I am confused too, but the compilation time is still pretty high at around 4 seconds at the moment

final kernel Sep 14, 2023, 7:48 AM

#

are you talking about the initial compliation when you start the dev server?

#

compiling the /secureAuth page takes 0-6ms for me

livid yew Sep 14, 2023, 7:48 AM

#

I tried to remove all the imports (layout and the opened page), and got the compilation time down to 700ms but thats just a naked nextjs app

livid yew Sep 14, 2023, 7:49 AM

#

final kernel are you talking about the initial compliation when you start the dev server?

When I start the development server, wait for it to fully start and then open the /secureAuth page for the first time, then I get a compilation time of ~4seconds even though it only displays a simple text

final kernel Sep 14, 2023, 7:49 AM

#

[00:43:23] aaaaaa@work:~/dev/PublicServices: pnpm run dev

> [email protected] dev /home/aaaaaa/dev/PublicServices
> next dev

- info Loaded env from /home/aaaaaa/dev/PublicServices/.env
- ready started server on [::]:3000, url: http://localhost:3000
- event compiled client and server successfully in 161 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 94 ms (20 modules)
- info Loaded env from /home/aaaaaa/dev/PublicServices/.env
- info Loaded env from /home/aaaaaa/dev/PublicServices/.env
- wait compiling /secureAuth/page (client and server)...

🌼 daisyUI components 2.51.6  https://daisyui.com
  ✔︎ Including:  base, components, 2 themes, utilities
  ❤︎ Support daisyUI:  https://opencollective.com/daisyui 
  
- event compiled client and server successfully in 2.1s (2636 modules)
- wait compiling...
- event compiled successfully in 197 ms (1273 modules)
SecureAuth: 51.786ms
SecureAuth: 1.235ms
SecureAuth: 3.656ms
SecureAuth: 1.408ms
SecureAuth: 2.08ms

livid yew Sep 14, 2023, 7:50 AM

#

In your case its 2.1 seconds, is this a resonable time for such a simple page?

final kernel Sep 14, 2023, 7:50 AM

#

and when i clear browser cache and reload it's still like 2ms

#

that's the initial dev server start

acoustic zinc Sep 14, 2023, 7:51 AM

#

^

#

i thought so too

final kernel Sep 14, 2023, 7:51 AM

#

unless i'm missing something there's nothing wrong or slow here

acoustic zinc Sep 14, 2023, 7:52 AM

#

even after making change to the file, rerendering page does not take that long

livid yew Sep 14, 2023, 7:54 AM

#

acoustic zinc even after making change to the file, rerendering page does not take that long

yeah thats true for this page. So my inital question was regarding my project's actual core idea, that is to display a set of lectures. The initial loading page the was also around ~5 seconds, which can be attributed to the dev-server start, but whenever I made changes to that page, the compilation time for the changes to take effect was also around 3 seconds. That's why I though that the reload-compilation is in direct relation to the now known initial-server-compilation

#

But just for my understanding, the initial compilation-time of in your case 2.1 seconds, cannot be lowered or is considered to be normal?

final kernel Sep 14, 2023, 7:55 AM

#

have you tested the prod build?

acoustic zinc Sep 14, 2023, 7:55 AM

#

I think the issue is specifically geared towards development

livid yew Sep 14, 2023, 7:56 AM

#

final kernel have you tested the prod build?

Yes, the initial load-time for users is also quite high, talking about multiple seconds. Some users reported back to me that they waited 15 seconds for anything to show.

final kernel Sep 14, 2023, 7:56 AM

#

where/how are you running the prod build?

livid yew Sep 14, 2023, 7:56 AM

#

Once the page has been opened on the user's maschine, future requests are much faster

#

If you open this page for the first time you should experience a quite high 'wait' time

final kernel Sep 14, 2023, 7:57 AM

#

seems to load instantly for me

acoustic zinc Sep 14, 2023, 7:58 AM

#

livid yew If you open this page for the first time you should experience a quite high 'wai...

maybe only first time render?

livid yew Sep 14, 2023, 7:58 AM

#

acoustic zinc maybe only first time render?

yes, when the page is opened for the first-first time

acoustic zinc Sep 14, 2023, 7:59 AM

#

try using generateStaticParam() to prerender all static pages
so that it wont take that long

livid yew Sep 14, 2023, 7:59 AM

#

final kernel seems to load instantly for me

Thats surprising but great

livid yew Sep 14, 2023, 8:00 AM

#

acoustic zinc try using `generateStaticParam()` to prerender all static pages so that it wont ...

The problem i see there is that I don'tt have static pages, as each page fetches data directly from an external endpoint and thus its contents change, so that they remain up-to-date?

final kernel Sep 14, 2023, 8:03 AM

#

one initial load was 6 seconds, another time was about 2 sec

#

where is this hosted?

livid yew Sep 14, 2023, 8:03 AM

#

On a private server with an exposed port

livid yew Sep 14, 2023, 8:06 AM

#

final kernel one initial load was 6 seconds, another time was about 2 sec

My initial guess was that the delay occurs due to the bandwidth limitations of our network. But the page-size is not that big so that it could have an impact, right? (upload speed: ~5Mb)

final kernel Sep 14, 2023, 8:09 AM

#

almost every hit is fast but the odd one takes 5 or more seconds

livid yew Sep 14, 2023, 8:09 AM

#

final kernel almost every hit is fast but the odd one takes 5 or more seconds

Which one do you mean?

final kernel Sep 14, 2023, 8:09 AM

#

no the duckdns one

livid yew Sep 14, 2023, 8:10 AM

#

yeah sorry, I meant the route

final kernel Sep 14, 2023, 8:10 AM

#

just /lectures with the list view

livid yew Sep 14, 2023, 8:18 AM

#

So both pages /lectures and /lectures/[id] fech the data from an external endpoint and whats important to note is that the fetch-result is not cached. This is because I tried to display a bigger collection of items and got the error that the fetch-result is to big to be cached, which is why i disabled the caching of that fetch-request altogether, which obviously impacts the performance to some degree. For me personally the production page is quite alright. I just received reports from other users that they faced long-wait times.

livid yew Sep 14, 2023, 8:40 AM

#

acoustic zinc I think the issue is specifically geared towards development

Yes this is true, I believe that the core issue, being the high compilation for the initial-page-load after the dev-server has been started, is somewhat solved by the fact that a compilation time of ~2 seconds is normal? In case that this delay is as low as it can be, then I am very satisfied.
Maybe as a small side-question what would be the best practice to reduce the compilation-time to a minimum?

In regard to the reload compilation-times, I believe that the upgrade to the newer Next version (13.4.19) has reduced the compilation-time. Given that the reload compilation time was previously also way above 1 second.

grand heart Sep 14, 2023, 9:30 AM

#

grand heart Can you try something like this to see if next-auth is being slow? ```js consol...

@livid yew have you had a chance to try this?

livid yew Sep 14, 2023, 9:31 AM

#

livid yew It takes about 239ms

Yes, this was for the initial-compilation when the dev server was started

#

#

(in this context: reload = browser-page-refresh)

grand heart Sep 14, 2023, 9:36 AM

#

Ok, another question. What happens if you clear the browser data?

#

Does it take a long time again or go fast?

livid yew Sep 14, 2023, 9:36 AM

#

grand heart Ok, another question. What happens if you clear the browser data?

including cookies or just the cached data?

grand heart Sep 14, 2023, 9:37 AM

#

The cookies

livid yew Sep 14, 2023, 9:41 AM

#

Now the session retrieval is way lower, (but I am also no longer signed in using the previously selected next-auth-provider)

livid yew Sep 14, 2023, 10:37 AM

#

Note I have renamed the 'Debug-Main' branch to 'Debug-Main-Compilation-Reproduction'

#Improve NextJS Compilation Time (Development)