SvelteKit技术问题：数据仅首次加载及layout与page.js使用场景

1. 实现仅首次页面加载时加载数据 #

你的问题源于 SvelteKit 默认会在每次客户端导航时重新执行 layout 的load函数，导致全局数据重复请求。以下是几种可靠的解决方案：

方案1：用 Svelte Store 缓存数据 #

创建全局 Store 存储用户信息，仅当 Store 为空时发起请求：

// $lib/stores/user.js
import { writable } from 'svelte/store';
import { api } from '$lib/api';

export const userStore = writable(null);

export async function fetchUserIfNeeded(fetch) {
    if ($userStore) return; // 已有数据直接返回
    const res = await api.get(fetch, '/user');
    userStore.set(res.status === 200 ? await res.json() : []);
}

修改 layout.js 调用缓存逻辑：

// layout.js
import { fetchUserIfNeeded, userStore } from '$lib/stores/user';
import { get } from 'svelte/store';

export const prerender = true;

export async function load({ fetch }) {
    await fetchUserIfNeeded(fetch);
    return { user: get(userStore) };
}

无论多少次导航，只要 Store 已有数据，就不会重复请求接口。

方案2：结合browser与sessionStorage缓存 #

适合刷新后允许重新请求的场景：

// layout.js
import { api } from '$lib/api';
import { browser } from '$app/environment';

export const prerender = true;

export async function load({ fetch }) {
    let user;
    if (browser) {
        const cachedUser = sessionStorage.getItem('user');
        if (cachedUser) user = JSON.parse(cachedUser);
    }
    if (!user) {
        const userRes = await api.get(fetch, '/user');
        user = userRes.status === 200 ? await userRes.json() : [];
        if (browser) sessionStorage.setItem('user', JSON.stringify(user));
    }
    return { user };
}

方案3：利用fetch缓存（进阶） #

通过设置cache: 'force-cache'复用请求结果，需后端配合设置 HTTP 缓存头：

const userRes = await api.get(fetch, '/user', { cache: 'force-cache' });

该方式依赖浏览器缓存策略，灵活性不如 Store 方案，建议优先选方案1。

2. layout.js 与 page.js 的使用场景及性能影响 #

使用场景 #

• layout.js：负责加载全局共享数据（用户信息、站点配置、导航菜单等），这些数据会被多页面复用，避免重复编写加载逻辑。
• page.js：负责加载当前页面专属数据（文章详情、商品列表等），数据仅服务于特定页面，与其他页面无关。

性能影响 #

• 你当前的做法（layout 加载全局数据，page 加载页面专属数据）是最佳实践，不会产生性能问题。
• SvelteKit 会并行执行 layout 和 page 的load函数（无论 SSR 还是客户端导航），并非等待 layout 加载完成才执行 page 的逻辑，因此不会增加页面加载时长。
• 禁用 SSR 时，客户端并行发起多个 API 请求（layout 和 page 的请求）反而能提升加载速度，因为浏览器可同时处理多个请求，无需串行等待。

是否要将所有数据放在同一文件？ #

完全没必要，反而不推荐：

• 代码可读性差：全局数据与页面专属数据混杂，后期维护难度大。
• 缓存效率低：若将页面数据放在 layout 中，每次导航到其他页面都会加载不必要的页面数据，浪费带宽。
• 耦合度高：页面数据与 layout 绑定，修改页面逻辑时可能影响全局 layout 逻辑。

内容的提问来源于stack exchange，提问作者E-g