NextJS电商项目：<Link>预取影响后端性能，能否改用router.push？

完全可以用router.push替代<Link>来解决预取导致的后端性能问题，同时完整保留Next.js客户端导航的SPA特性，具体实现和注意事项如下：

• 核心实现方式
  导入Next.js的useRouter钩子，给菜单元素绑定点击事件，通过router.push触发客户端跳转。示例代码：

  import { useRouter } from 'next/router'
  
  export default function ProductMenu({ products }) {
    const router = useRouter()
  
    const goToProduct = (slug) => {
      router.push(`/products/${slug}`)
    }
  
    return (
      <nav>
        <ul>
          {products.map((product) => (
            <li 
              key={product.id} 
              onClick={() => goToProduct(product.slug)}
              style={{ cursor: 'pointer', padding: '8px' }}
            >
              {product.name}
            </li>
          ))}
        </ul>
      </nav>
    )
  }
  

• 为什么能保留SPA优势
  router.push是Next.js客户端路由的底层核心方法，和<Link>使用的是同一套导航逻辑——跳转时不会刷新整个页面，只会更新页面组件和路由状态，完全继承了SPA的无刷新体验和性能优势。

• 彻底避免预取
  <Link>的预取是内置行为（即使设置prefetch={false}，部分Next.js版本仍会对视口内的链接进行预取），而router.push仅在用户主动点击时才会触发目标页面的数据加载（对应你的getStaticProps生成的静态页面），不会提前发起请求，从根源上解决了预取商品页导致的后端压力。

• 额外优化：兼顾可访问性与SEO
  如果需要支持键盘导航（比如回车触发跳转）或保留SEO友好的链接结构，可以用<a>标签配合阻止默认行为：

  <a
    href={`/products/${product.slug}`}
    onClick={(e) => {
      e.preventDefault()
      goToProduct(product.slug)
    }}
    style={{ textDecoration: 'none', color: 'inherit', padding: '8px' }}
  >
    {product.name}
  </a>
  

  这种方式既保留了<a>标签的语义化（利于爬虫和屏幕阅读器），又通过router.push实现客户端跳转。

内容的提问来源于stack exchange，提问作者tediboir1