在同一路由上获取新 API 后在客户端重新呈现新页面数据

Question

我的导航栏中有一个搜索输入，它将用户发送到

search/[searchTerm

中的一个

+page.server.ts

页面，然后使用该词作为动态路由参数输入并作为 API 端点中的搜索词输入，然后显示在

+page.svelte

上获取的数据。我的问题是，一旦在显示数据的

search/[searchTerm]

页面上，当我尝试另一个搜索时，再次运行

+page.server.ts

加载功能，更新动态路由参数，并在服务器上获取新数据，但在客户端，数据没有更新，仍然显示第一次搜索的结果。有没有办法使页面数据具有反应性？我已经在页面数据上尝试了

$:

，但客户端数据不会改变。

+page.server.ts

：

export const load: ServerLoad = async ({ params }) => {

    const searchTerm: string | undefined = params.searchTerm;

    const fetchSearchResults = async (searchTerm: string | undefined) => {
        const response = await getSearchResults(searchTerm);
        const results = await response.json();
        // console.log(results.albums.items);
        return results;
    };
    return {
        results: fetchSearchResults(searchTerm)
    };
};

我的 +page.svelte 脚本：

export let data: PageData;

const { items } = data.results.albums;

const albums = items.slice(0, 10).map((album: any) => ({
    artist: album.artists.map((_artist: any) => _artist.name).join(', '),
    songUrl: album.external_urls.spotify,
    title: album.name,
    coverImage: album.images[2].url
}));

导航栏上的搜索输入：

<form action={`/search/${searchTerm.split(' ').join('+')}`}>
    <input
        bind:value={searchTerm}
        type="text"
        placeholder="Search…"
    />
    <button type="submit"> Search </button>
</form>