利用 Next.js 的 router.push 实现页面局部刷新

场景#

“新建对话” 是 AI 对话应用的一个常用功能。

勇哥在刚开始做 AI 对话应用的时候，是基于 Next.js + shadcn/ui 来做的。实现 “新建对话” 功能时，很自然的用了 Next.js 的 router.push () 路由到新对话。

问题#

但是在实际测试中发现，页面有概率不会重新渲染，即使已经路由到了新对话地址，页面内容仍然是旧页面。

解决办法#

分析发现 router.push() 确实有时候不会触发完整的页面重新渲染，特别是当 URL 参数改变但路径保持相同时。这是因为 Next.js 默认采用的客户端导航优化机制。

于是做了如下修改：

...
export function NewChat() {
  ...
  return (
    <Suspense>
      <Button onClick={async () => {
        const newChat = createQueryString('newchat', 'true')
        await router.push(newChat)
        router.refresh()
      }}>
        <Plus /> 新建对话
      </Button>
    </Suspense>
  )
}

说明#

添加了 async/await 确保导航完成
使用 router.refresh () 确保在 push 完成后再执行 refresh，确保页面在导航后正确重新渲染

另外，也可以添加一些状态管理来确保组件确实被重新渲染。或在导航后添加 window.location.reload () 作为后备方案，但这会导致完整的页面刷新，体验不好。

题外话#

后来看到 vercel 开源的 AI Chatbot，也是基于 Next.js + shadcn/ui 的，不谋而合。