SvelteKit中点击按钮无法刷新服务端生成UID的问题排查

我正在构建一个SvelteKit页面，希望通过按钮获取服务端随机生成的UID。借助页面加载的load机制，我已根据建议修改了代码：

现有代码 #

服务端代码（src/routes/test/+page.js） #

const generateID = () => {
    let key = '00:12:34:56:63'
    
    /* randomize an array of length N with with 64-digits */
    /* and join it with ':' to build a string */
    
    return key
}

// 追踪已生成的键
const lookups = new Map ()

export const load = async ({ params, depends }) => {
    let uid
    
    do {
        uid = generateID ()
    } while (lookups.has (uid))
    
    lookups.set (uid, 1)
    
    // 标记依赖键
    depends ('app:randomkey')

    return {
        props: {
            uid
        }
    }
}

客户端代码（src/routes/test/+page.svelte） #

<script lang="ts">
    import { invalidate } from '$app/navigation'
    import { page } from '$app/stores'
     
    export let data
    
    const handler = () => {
       invalidate ('app:randomkey')
    }
</script>
<p> Click button to refresh UID from server </p>
<p>     
    <button on:click={ handler }> refresh UID </button>
    { data.props.key } 
</p>

目前通过键盘F5刷新页面时，UID可以正常更新，但点击按钮时却无法刷新。请问问题出在哪里？如何在保留应用布局和内部状态的前提下修复该问题？

问题根源 #

• 字段名不匹配：服务端load函数返回的props字段是uid，但客户端页面渲染的是data.props.key——即使invalidate触发了服务端重新生成UID，页面也会因字段名错误显示旧值（或无值），看起来像是没刷新。
• 示例generateID是固定值：当前代码里generateID直接返回固定字符串，第一次生成后lookups会存入该值，后续load时会陷入死循环（实际使用中如果是随机逻辑可忽略，但示例代码会导致功能异常）。
• 模块级lookups的潜在隐患：在SvelteKit生产环境的多进程模式下，模块级变量会被进程共享或缓存，可能导致UID重复或内存泄漏，但这不是当前按钮不刷新的直接原因。

修复步骤 #

1. 修正客户端渲染字段 #

把页面中的data.props.key改为data.props.uid，确保渲染服务端返回的正确字段：

<p>     
    <button on:click={ handler }> refresh UID </button>
    { data.props.uid } 
</p>

2. 完善generateID随机逻辑 #

替换固定返回值，实现真正的随机UID生成，避免死循环问题：

const generateID = () => {
    // 生成6个0-FF的十六进制数，用冒号分隔，模拟MAC地址格式
    return Array.from({ length: 6 }, () => 
        Math.floor(Math.random() * 256).toString(16).padStart(2, '0')
    ).join(':').toUpperCase();
}

3. 优化lookups生命周期（可选） #

如果不需要严格去重，可直接移除do-while循环和lookups简化逻辑；若需跨请求去重，模块级lookups在多进程环境不可靠，建议改用会话存储或数据库追踪。

4. 确认依赖键一致性 #

确保load里的depends('app:randomkey')和客户端invalidate('app:randomkey')的键完全一致（大小写敏感），当前代码拼写正确，无需修改。

修复后点击按钮时，invalidate('app:randomkey')会触发服务端load函数重新执行，生成新UID，客户端页面会自动更新渲染值，同时保留应用布局和内部状态。

内容的提问来源于stack exchange，提问作者Hefeust CORTES