Svelte中Load函数重载时未返回更新数据的问题求助

这是SvelteKit的客户端导航缓存在作祟：

• 软刷新（浏览器普通刷新）时，SvelteKit会优先复用客户端缓存的页面初始数据（即登录前的空用户状态），不会主动触发服务器端的load函数重新获取最新数据。
• 硬加载是强制绕过所有缓存直接向服务器发起请求，所以能拿到正确的用户数据；调用invalidate('user:changed')是主动触发load函数重新执行，因此数据会更新，但刷新后又会回到缓存的空状态。

方案1：禁用服务器端load函数的缓存 #

直接在+layout.server.ts中添加cache: 'no-store'，强制每次请求都重新执行load函数，不从缓存取数据：

// +layout.server.ts
export const cache = 'no-store'; // 关键：禁用缓存，每次刷新都从服务器拉取最新数据

export const load: LayoutServerLoad = async ({ cookies, locals, depends }) => {
    depends('user:changed');
    return locals?.user;
};

方案2：客户端初始化时主动触发数据更新 #

如果不想完全禁用缓存，可以在根布局组件里，挂载时主动触发invalidate，强制刷新用户数据：

<!-- +layout.svelte -->
<script>
    import { invalidate } from '$app/navigation';
    import { onMount } from 'svelte';

    onMount(() => {
        // 页面挂载后立即验证用户数据，覆盖缓存的空状态
        invalidate('user:changed');
    });
</script>

额外检查点 #

确认你的session cookie属性设置正确：

• 本地开发时不要设置Secure属性（否则HTTP环境下cookie不会被发送）
• 确保开启HttpOnly属性（安全最佳实践，同时不影响hooks.server.ts读取）

内容的提问来源于stack exchange，提问作者Rashy A