Next.js中使用shallow routing时，为何getInitialProps会被每次调用？

你理解的核心点是对的，但还有几个细节和潜在问题需要明确，我来帮你拆解：

• Shallow Routing的核心规则：当你在同一个页面内调用Router.push()或Router.replace()并设置shallow: true时，页面组件的getInitialProps确实不会被重新调用。这是因为shallow routing是纯客户端的路由更新，不会触发服务器端渲染或页面组件的重新初始化，只会更新浏览器地址栏和router对象的状态。

• 你的代码存在路径拼接问题：你当前用${path}/?param=hi的方式拼接新路径，如果原asPath已经包含查询参数（比如/list?category=book），会生成格式错误的URL（比如/list?category=book/?param=hi）。正确的做法应该用URLSearchParams来安全处理查询参数：

  import Router from 'next/router'
  
  // ...
  changeurl = () => { 
    console.log('----add params to url----') 
    const currentUrl = new URL(window.location.href)
    // 添加或更新参数
    currentUrl.searchParams.set('param', 'hi')
    // 拼接正确的路径+参数
    const newPath = `${currentUrl.pathname}${currentUrl.search}`
    Router.push(newPath, newPath, { shallow: true }) 
  } 
  // ...
  

• 例外情况需要注意：如果你的push/replace操作是跳转到不同的页面路由（比如从/list到/detail），即使设置了shallow: true，目标页面的getInitialProps还是会被调用——因为Next.js需要加载新的页面组件，shallow routing只适用于同一页面内的参数更新。

• 快速验证方法：你可以在页面的getInitialProps中添加一句console.log('getInitialProps called')，然后触发changeurl函数，观察控制台是否有输出，就能直观确认getInitialProps是否被调用了。

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