Performance issue with huge amount of pre-rendered pages.

[KennFatt]

Problems / Solutions / Workaround

1. Route /menus/[menuId] should not be pre-rendered. Instead, I can use useRouter() hook to handle dynamically client-side navigation.
   1. Remove /menus/index.js
   2. Make the /menus/[menuId] as a static page
   3. Rely on URL query and routes with useRouter() hook
   4. Implement fallback or loading indicator
   5. Fetch single data from /api route after component initially mounted.
2. Route /menus/[menuId] pre-rendered not ahead-of-time but instead just-in-time.

Steps to reproduce

• Initial page visit without cache hits.

EDIT:

1. It wasn't because of the pre-rendered pages that causing performance issues on the client. I'll investigate it deeper later. I'm guessing it is because of browser extensions that interfere with performance while I'm auditing the page.

[KennFatt]

The actual problem

FPS dropped when the user scrolling through the whole page that has background image. And It only happened in a few browsers (chrome-based browser, especially),

This following code seems cost extra for the browser to repaint the page:

  background-attachment: fixed;

And I did it in almost (or all) pages. See this line that I'm using bg-fixed util class.

Further reading:

• Coderwall - performance boost on fixed background image
• Fourkitchens - Fix scrolling performance with CSS will-change property
• Chenhuijing - On fixed elements and backgrounds
• Medium - Fixed background image performance issue
• SO - Why "Composite Layers" takes so much time?