Why using <Link> is better than router.push? - next.js

Question

I have an ecommerce application in NextJS and I have a problem with my main menu. In fact, if I use the <Link> tag of Next, with or without the "prefetch" param, I still have the links that are prefetch (either on hover or if the item is in the viewport). My pages are loaded with getStaticProps.
I would like to use <Link> to keep all of benefits of Next and SPA, but I think that prefetching all of my products page before I need them destroys the performance of the backend.
Do you think I can use router.push to do this part of my app?

Answer 1

By using router.push instead of Link Component, your app would lose its capabilities such as
SPA (because it would redirect to a new page) and
SEO (because it cannot be
detected by crawlers)
Ideally for an e-commerce platform, i think it would be best to utilize the Link component and not overthink about your prefetch concern because these built in Components by nextJs are already optimized by the Vercel Team.
We should also only use router.push when Link Components are not enough. A good example of this would be upon clicking a button we want to trigger other frontend/backend functions and then redirecting to another page.
function handleClick(){
randomFunction();
anotherRandomFunction()
router.push('<random_link>')
}