Svelte5中从服务端向客户端传递数组的正确方法

问题根源 #

你遇到的问题本质是给数组附加自定义属性不符合JSON规范。服务端渲染时，数据是在Node环境直接传递的对象，额外属性能保留；但服务端需要把数据序列化为JSON传给客户端，而JSON只认可数组的索引元素（影响length的部分），挂载在数组对象上的NoOfRecords、"L"这类非数字键属性会被直接丢弃，客户端最终拿到的就是length为0的空数组。

正确传递方式 #

不要给数组附加自定义属性，改用对象包裹数组与额外属性的结构，确保JSON序列化能完整保留所有数据。

修改后的代码示例：

+page.server.js

export async function load({ url, cookies }) {
    return { Tom: await setUpTom() }
}

async function setUpTom() {
    // 用对象封装数组和属性，替代给数组加属性的写法
    return {
        list: [], // 原psTom数组的内容
        NoOfRecords: 34,
        L: {
            list: [], // 原psTom["L"]数组的内容
            NoOfRecords: 4
        }
    };
}

+page.svelte

...
let pcTom = data.Tom;
// 访问对应数据：pcTom.list、pcTom.NoOfRecords、pcTom.L.list、pcTom.L.NoOfRecords
...

补充说明 #

JSON规范中，数组仅包含有序的索引元素，任何附加在数组对象上的非数字键属性都不属于JSON数组的合法结构，因此序列化过程中会被过滤。Svelte的服务端数据传递依赖JSON序列化，必须使用标准的对象/数组结构才能保证数据在服务端和客户端一致。

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