面试题：SvelteKit 路由专家难度面试题

动态路由下 SSR 和 SSG 的配置

SSR：在动态路由（例如 [id].js 这种形式）场景下，如果数据的获取依赖用户请求时的参数（如动态路由中的 id），且数据经常变化，SSR 是较好选择。通过 load 函数在服务器端获取数据，这样每次请求都能获取最新数据。例如：

export async function load({ params }) {
    const data = await fetch(`https://api.example.com/data/${params.id}`);
    return { data: await data.json() };
}

SSG：若数据相对静态，不随每次请求变化，可以使用 SSG。在构建时生成页面，提高首次加载速度。使用 export const prerender = true; 并在 load 函数中获取数据。但要注意，若数据依赖动态参数，需确保构建时能获取到所有可能的数据。例如：

export async function load({ params }) {
    const data = await fetch(`https://api.example.com/data/${params.id}`);
    return { data: await data.json() };
}
export const prerender = true;

嵌套路由下 SSR 和 SSG 的配置

SSR：对于嵌套路由，若内层路由依赖外层路由的数据且数据需要实时获取，SSR 依旧适用。在每个嵌套层级的 load 函数中按需获取数据。例如，外层路由 parent/[id].js 获取父级数据，内层路由 parent/[id]/child.js 基于父级 id 获取子级数据。

// parent/[id].js
export async function load({ params }) {
    const parentData = await fetch(`https://api.example.com/parent/${params.id}`);
    return { parentData: await parentData.json() };
}
// parent/[id]/child.js
export async function load({ params, parent }) {
    const childData = await fetch(`https://api.example.com/child/${params.id}?parentId=${parent.parentData.id}`);
    return { childData: await childData.json() };
}

SSG：当嵌套路由的数据相对静态时，可启用 SSG。同样使用 prerender = true，但需注意数据依赖关系，确保构建时数据获取顺序正确，能完整生成所有页面。

复杂数据获取逻辑的数据管理和加载优化

数据管理：利用 SvelteKit 的 load 函数组合。若数据获取逻辑复杂，可将数据获取拆分成多个函数，然后在 load 函数中组合。例如，有多个 API 调用且有先后依赖关系：

async function fetchFirstData() {
    const response = await fetch('https://api.example.com/first');
    return await response.json();
}
async function fetchSecondData(firstData) {
    const response = await fetch(`https://api.example.com/second?param=${firstData.id}`);
    return await response.json();
}
export async function load() {
    const firstData = await fetchFirstData();
    const secondData = await fetchSecondData(firstData);
    return { firstData, secondData };
}

加载优化：
- 代码拆分：对于大的数据集或复杂计算，可使用代码拆分，延迟加载非关键数据。SvelteKit 支持动态导入，在需要时加载数据处理逻辑。
- 缓存：在服务器端，可以实现简单的缓存机制，如使用内存缓存（如 Map 在 Node.js 中），避免重复获取相同数据。对于频繁请求且不常变化的数据，缓存能显著提高性能。
- 并行数据获取：若数据获取之间没有依赖关系，可以使用 Promise.all 并行获取数据，减少整体获取时间。例如：

async function fetchData1() {
    const response = await fetch('https://api.example.com/data1');
    return await response.json();
}
async function fetchData2() {
    const response = await fetch('https://api.example.com/data2');
    return await response.json();
}
export async function load() {
    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
    return { data1, data2 };
}

星途面试题库

面试题：SvelteKit 路由专家难度面试题

知识考点

面试题答案

动态路由下 SSR 和 SSG 的配置

嵌套路由下 SSR 和 SSG 的配置

复杂数据获取逻辑的数据管理和加载优化