Next.js had been server side rendering (SSG) 1,500+ course cards on /courses. Combined with next/links "hydrating" using the same 1,500 courses as props (via json), this caused memory problems on mobile (tested on Pixel 2, Pixel 5a, Fire Tablet 10) which manifested in slow page transitions when clicking nav items. In some cases the page would freeze indefinitely.
This addresses the issue by implementing infinite scroll. Using this method, the SSG /courses page now only initially renders 100 courses. On scroll it will grab more courses from the all courses array (from props).
Description
Next.js had been server side rendering (SSG) 1,500+ course cards on /courses. Combined with next/links "hydrating" using the same 1,500 courses as props (via json), this caused memory problems on mobile (tested on Pixel 2, Pixel 5a, Fire Tablet 10) which manifested in slow page transitions when clicking nav items. In some cases the page would freeze indefinitely.
This addresses the issue by implementing infinite scroll. Using this method, the SSG /courses page now only initially renders 100 courses. On scroll it will grab more courses from the all courses array (from props).
Screenshot
Without infinite scroll
https://user-images.githubusercontent.com/362647/218160883-a3cfa052-a27a-4fe0-8f4a-2ab01ef4d0c3.mp4
With infinite scroll
https://user-images.githubusercontent.com/362647/218160205-f56f6621-b19c-43f7-aa7a-b3f8050d3c35.mp4