Hacker News Reader

Comment by ZephyrBlu | Hacker News Reader

8.2 MB initial page load and slow as hell (1-2sec) when trying to navigate between pages. It was so slow I thought the site wasn't doing anything.

It looks like rendering a new page is blocked until API requests to both "categories" and "products" endpoints are completed, which is terrible. They should be background requests that aren't render-blocking. Also, these requests fire _every time_ you click a link.

Right now, the user experience is 0/10. Would not recommend.

View on HN

One of the reasons is that the page is not using next.js 10, which has image optimization built in, for comparison you can check the ecommerce app built in next.js 10 here:

https://demo.vercel.store/

Performance is so much better for this one.

next.js 10 finally has the "home.php" feel. Yeah, yeah, full-circle and everything but I can use typescript to create "home.tsx", come on!

Culprit is large image than necessary as its always the case. Out of 8.4 MB transfered 7.5 are just images. Product images which they are showing in 400x500 viewport has actual size of 2400x3600 (7x). I think NextJS introduces <Image /> component im not sure how much that would have been useful.

Definitely not the images causing it to be slow as suggested in the replies. It's just poorly built. I have a next app that was using the older version with massive images and navigation was near instant.

I think they are commenting about the images specifically.

As you say, the large images and poor navigation are definitely separate issues.

To be fair, the bulk of the page load consists of large unoptimized images. My page load was 9.1 MB of which 8.1 MB were images and 446 kB was react devtools. So that means the rest of the site is about 0.5 MB.

why would a prod build ship 446kB of devtools?

we're clearly discussing radically non-optimized (ie, misconfigured) build, making criticisms of nextjs per se entirely moot.

"It looks like rendering a new page is blocked until API requests to both "categories" and "products" endpoints are completed" This could be the known issue[0] with how Next.js does Server Side Rendering with getServerSideProps(). It calls this on every page transition, even client side. Often resulting in unnecessary loading of initial data.

[0][https://github.com/vercel/next.js/issues/11897]

Damn. If this is a Next.js issue then I'm pretty disappointed that it doesn't work well for such a common use case.

From the looks of that issue there are workarounds in some instances though.

It's not just that the page loads are slow - they give you zero feedback that something is actually happening. Chrome's progress bar never appears, links don't change style, etc.

Reply on news.ycombinator.com