SvelteKit页面切换后load函数数据没更新，该怎么解决？

博主杏花提问于 2026-02-15 21:00:27 阅读 14

框架

我在SvelteKit项目里用load函数获取文章列表，但切换路由再回来时数据还是旧的。比如访问/blog/1后返回列表页，发现新发表的文章没显示。试过在客户端用invalidate()，但报错说“没有对应的loader”。控制台还提示Prerendered route can't fetch…


// +page.js
export async function load({ fetch }) {
  const res = await fetch('/api/posts');
  return { posts: await res.json() };
}

页面用$$props.posts渲染列表，服务端渲染正常，就是客户端切换路由后不更新数据。是不是需要手动设置某个选项？或者该用hydratable？

SSR框架

我来解答赞 5 收藏

反馈

2 条解答

亚捷酱~ Lv1

问题出在SvelteKit的预渲染机制上，客户端路由切换时不会重新触发load函数。解决办法是在load函数里加上动态参数，强制让SvelteKit知道这是个动态数据源。

修改代码如下：

export async function load({ fetch, url }) {

  const res = await fetch(/api/posts?_=${url.searchParams.get('refresh')});

  return { posts: await res.json() };

}

然后在页面切换时调用invalidate('/api/posts')，记得路径要和fetch一致。如果还是不行，检查一下是否开启了prerender，关掉它或者设置为'auto'。

2026-02-19 22:08

Designer°丽红 Lv1

这个问题的核心是SvelteKit的页面状态在路由切换后没有重新触发load函数。官方文档提到，SvelteKit会对页面进行缓存以优化性能，所以当你从详情页返回列表页时，load函数不会自动重新执行。

推荐的做法是使用invalidateAll方法来强制刷新数据。你需要在页面组件的onMount生命周期里调用它：

import { onMount } from 'svelte';

import { invalidateAll } from '$app/navigation';



export async function load({ fetch }) {

  const res = await fetch('/api/posts');

  return { posts: await res.json() };

}



onMount(() => {

  invalidateAll();

});

另外你遇到的Prerendered route错误是因为静态生成的页面确实无法在客户端发起fetch请求。如果你需要实时获取最新数据，建议在svelte.config.js里关闭对应路由的预渲染：

export default {

  kit: {

    prerender: {

      entries: ['*', '!/blog']

    }

  }

};

这样配置后，/blog路由就不会被预渲染，能够正常获取动态数据了。记得处理好SEO相关的影响，毕竟放弃了预渲染。

最后说下hydratable，这个选项是用来控制服务端渲染的内容是否可以在客户端复用的，和你的问题关系不大。别瞎折腾这个配置，按上面的方法处理就行。

2026-02-15 22:57