目前小弟接手一個專案，前端Vue都是利用@tanstack/vue-query的套件來向後端發送API，只是這樣要如何避免Server及Client端重複發送API?
我有將問題丟給Copilot，他給出的解答如下：

Vue Query 的快取機制能有效避免伺服器和客戶端重複呼叫 API，主要是通過以下幾個方面來實現的：

1. 快取資料
   當你使用 useQuery 來獲取資料時，Vue Query 會自動將返回的資料快取起來。這意味著在相同的查詢鍵（queryKey）下，後續的查詢會直接從快取中獲取資料，而不是重新發送 API 請求1。

2. 資料過期時間（staleTime）
   你可以設定資料的過期時間（staleTime），在這段時間內，資料被認為是新鮮的，不會重新獲取。這樣可以避免在短時間內重複發送相同的 API 請求1。

const { data } = useQuery('todos', fetchTodos, {
staleTime: 1000 * 60 * 5, // 資料過期時間設為5分鐘
})
3. 初始資料（initialData）
在伺服器端渲染（SSR）中，你可以使用 initialData 來提供初始資料，這樣客戶端在初次渲染時就不需要再次發送 API 請求1。

const { data } = useQuery('todos', fetchTodos, {
initialData: serverData, // 來自伺服器端的初始資料
})
4. 快取鍵（queryKey）
每個查詢都有一個唯一的快取鍵（queryKey），這個鍵用來標識和管理快取資料。當相同的快取鍵被使用時，Vue Query 會重用快取中的資料，而不是重新發送請求1。

5. 背景重新獲取（Background Refetching）
   當資料過期或需要更新時，Vue Query 會在背景中自動重新獲取資料，而不會影響使用者的體驗。這樣可以確保使用者看到的是最新的資料，同時避免不必要的重複請求1。

綜合範例
以下是一個綜合範例，展示如何利用 Vue Query 的快取機制來避免重複呼叫 API：

import { useQuery } from '@tanstack/vue-query'

export default {
setup() {
const { data, error, isLoading } = useQuery(
'todos',
() => fetch('/api/todos').then(res => res.json()),
{
staleTime: 1000 * 60 * 5, // 資料過期時間設為5分鐘
initialData: serverData, // 來自伺服器端的初始資料
}
)

return { data, error, isLoading }

}
}
在這個範例中，useQuery 會快取從 /api/todos 獲取的資料，並在5分鐘內重用這些資料，避免重複請求。同時，利用 initialData 提供伺服器端的初始資料，避免客戶端初次渲染時重複發送 API 請求。

然而，我看官網的快取範例說明(https://tanstack.com/query/latest/docs/framework/vue/guides/caching)，似乎只有設定 staleTime (資料過期時間)，在時間範圍內前端才不會重複發送API請求。

因此，到底是Vue Query本身的快取機制，還是只有staleTime，抑或是其他的機制可以避免Server及Client端重複發送API?