SvelteKit静态页面：如何在load()中获取查询参数并调用fetch？

问题原因 #

使用adapter-static构建时，load函数在构建阶段执行，此时没有客户端的访问URL，无法获取到查询参数（比如?product=FOO），直接用url.searchParams.get('product')会拿到null，如果API请求依赖这个参数就会导致构建失败。而onMount是客户端挂载后执行，能拿到正确参数，但load已经提前执行完毕，所以load里无法获取onMount赋值的变量。

解决方案 #

方案1：客户端侧完成参数获取与API调用 #

适合不需要预渲染API数据的纯静态页面，直接在客户端获取参数并发起请求：

<script>
    import { onMount } from 'svelte';
    import { page } from '$app/stores';

    let productData = null;
    let productCode = 'XXX';

    // 页面挂载后获取参数并调用API
    onMount(async () => {
        productCode = $page.url.searchParams.get('product') || 'XXX';
        const res = await fetch(`/products/${productCode}`);
        productData = await res.json();
    });

    // 可选：监听URL参数变化，实时更新数据
    $: {
        const newCode = $page.url.searchParams.get('product') || 'XXX';
        if (newCode !== productCode) {
            productCode = newCode;
            (async () => {
                const res = await fetch(`/products/${productCode}`);
                productData = await res.json();
            })();
        }
    }
</script>

{#if productData}
    <div>产品信息：{JSON.stringify(productData)}</div>
{:else}
    <div>加载中...</div>
{/if}

方案2：预渲染默认数据 + 客户端动态更新 #

如果需要预渲染部分默认数据，同时支持客户端根据查询参数加载对应内容：

1. load函数返回默认数据（供预渲染使用）

export async function load({ fetch }) {
    // 构建阶段返回默认产品数据
    const res = await fetch('/products/XXX');
    return await res.json();
}

2. 页面组件中结合客户端逻辑更新数据

<script>
    import { browser } from '$app/environment';
    import { page } from '$app/stores';

    export let data; // 接收load返回的默认数据
    let productData = data;
    let productCode = 'XXX';

    // 仅在客户端环境中处理查询参数
    $: if (browser) {
        const newCode = $page.url.searchParams.get('product') || 'XXX';
        if (newCode !== productCode) {
            productCode = newCode;
            (async () => {
                const res = await fetch(`/products/${productCode}`);
                productData = await res.json();
            })();
        }
    }
</script>

{#if productData}
    <h3>{productData.name}</h3>
    <p>{productData.description}</p>
{:else}
    <p>加载中...</p>
{/if}

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