場景#
“新建對話” 是 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 的,不謀而合。