I'm developing a menu page for a restaurant. This page will display 200 food products, each accompanied by an image and relevant details. The data is sourced from a separate backend. I'm considering using Next.js's getStaticProps to fetch the menu data at build time. My understanding is that with getStaticProps, the data is retrieved during the build process, meaning users receive pre-rendered content without additional API calls during runtime.

Given that there are 200 images, I want to ensure efficient loading in the user's browser. If I utilize Next.js's Image component, which supports lazy loading by default, will this approach handle the progressive loading of images effectively? Is there anything else I should consider to optimize the user experience in this scenario?

Additionally There will be menu bar which will show menu categories and clicking that will take the user to that part of the page.


Example: https://deliveroo.co.uk/menu/London/soho/mcdonalds-0244-185-187-oxford-street/?day=today&geohash=gcpvhffss2t6&time=ASAP