Replaced the Next.js Link component with a custom component that calls the router API onClick only. No prefetching.
Why?
Shortly after launch of the new site, and after we started to redirect traffic to it from the old materialdesignicons.com site, the server became inundated with HTTP requests, bringing the server to its knees. After careful research, we believe this implementation detail was the root cause of the problem.
Background
The Next.js <Link> component is incredibly opinionated and, in our case, server breaking. To navigate the local site quickly utilizing the Next.js router, use of the Link component, or individual router calls is required. However, the Link component has this feature that cannot be disabled fully:
prefetch - Prefetch the page in the background. Defaults to true. Any <Link /> that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing prefetch={false}. When prefetch is set to false, prefetching will still occur on hover. Pages using Static Generation will preload JSON files with the data for faster page transitions. Prefetching is only enabled in production.
The prefetch option cannot be set globally. Even if we added prefetch={false} to all links, hovering still causes a prefetch to happen, regardless of that setting. For our Icon Library view, having 30+ icons on screen at one time means 30 extra HTTP requests. Scroll quickly and suddenly one user can trigger thousands of calls in a very, very short time period.
What's Changed
Replaced the Next.js
Linkcomponent with a custom component that calls the router APIonClickonly. No prefetching.Why?
Shortly after launch of the new site, and after we started to redirect traffic to it from the old
materialdesignicons.comsite, the server became inundated with HTTP requests, bringing the server to its knees. After careful research, we believe this implementation detail was the root cause of the problem.Background
The Next.js
<Link>component is incredibly opinionated and, in our case, server breaking. To navigate the local site quickly utilizing the Next.js router, use of the Link component, or individualroutercalls is required. However, theLinkcomponent has this feature that cannot be disabled fully:Source: https://nextjs.org/docs/api-reference/next/link
The
prefetchoption cannot be set globally. Even if we addedprefetch={false}to all links, hovering still causes a prefetch to happen, regardless of that setting. For our Icon Library view, having 30+ icons on screen at one time means 30 extra HTTP requests. Scroll quickly and suddenly one user can trigger thousands of calls in a very, very short time period.Related issue: https://github.com/Pictogrammers/pictogrammers.com/issues/25