在SvelteKit中实现服务端按需查询客户对应地点的规范方案？

1. 基于URL查询参数的页面级Load函数方案 #

这是最贴合SvelteKit「路由驱动数据」思想的方案：

• 当用户选中客户时，更新URL查询参数触发load函数重新执行：

  <script>
    import { goto, page } from '$app/navigation';
    let selectedCustomer;
  
    async function onCustomerChange(e) {
      selectedCustomer = e.target.value;
      const params = new URLSearchParams($page.url.searchParams);
      params.set('customerId', selectedCustomer);
      await goto(`?${params.toString()}`, { keepFocus: true });
    }
  </script>
  
  <select on:change={onCustomerChange}>
    <!-- 客户选项列表 -->
  </select>
  

• 在页面的+page.server.js中读取查询参数，按需加载对应地点：

  export async function load({ url }) {
    const customerId = url.searchParams.get('customerId');
    let locations = [];
    if (customerId) {
      // 调用数据库查询该客户的关联地点
      locations = await getLocationsByCustomerId(customerId);
    }
    // 加载所有客户选项（若客户数量不大）
    const customers = await getAllCustomers();
    return { customers, locations };
  }
  

• 页面组件直接通过export let data拿到data.locations渲染地点下拉框。

优点：状态保存在URL中，刷新页面不丢失；完全利用SvelteKit服务端加载能力，避免客户端全量加载；符合框架惯用模式。
缺点：URL会带有查询参数，若在意美观可改用路由参数（如/upload/[customerId]），但需调整路由结构。

2. 客户端调用服务器端端点（API路由） #

API路由是SvelteKit官方支持的标准方案，并非「不符合惯用规范」，按需调用在很多场景下非常合理：

• 创建/api/locations/[customerId]/+server.js端点：

  import { error } from '@sveltejs/kit';
  
  export async function GET({ params }) {
    const { customerId } = params;
    if (!customerId) throw error(400, 'Customer ID required');
    const locations = await getLocationsByCustomerId(customerId);
    return new Response(JSON.stringify(locations), {
      headers: { 'Content-Type': 'application/json' }
    });
  }
  

• 在页面组件中监听客户选择变化，调用端点获取地点：

  <script>
    let selectedCustomer;
    let locations = [];
  
    async function onCustomerChange(e) {
      selectedCustomer = e.target.value;
      if (!selectedCustomer) {
        locations = [];
        return;
      }
      const res = await fetch(`/api/locations/${selectedCustomer}`);
      locations = await res.json();
    }
  </script>
  
  <select on:change={onCustomerChange}>
    <!-- 客户选项列表 -->
  </select>
  <select>
    {#each locations as location}
      <option value={location.id}>{location.name}</option>
    {/each}
  </select>
  

优点：无需修改URL，适合不需要持久化状态的场景；实现简单，按需加载数据。
缺点：状态不保存到URL，刷新页面会丢失选中的地点；需手动处理错误和加载状态。

3. 组件级服务器数据加载（SvelteKit 1.20+） #

如果希望把数据加载逻辑和组件封装在一起，可使用组件级load函数：

• 创建LocationSelect.svelte组件，定义服务器端加载逻辑：

  <script>
    export let customerId;
    export let data;
  </script>
  
  <select>
    {#each data.locations as location}
      <option value={location.id}>{location.name}</option>
    {/each}
  </select>
  
  <script context="module">
    export async function load({ props }) {
      const { customerId } = props;
      const locations = customerId ? await getLocationsByCustomerId(customerId) : [];
      return { locations };
    }
  </script>
  

• 在父页面中，当客户选中变化时，传递customerId并触发组件重新加载：

  <script>
    import { invalidate } from '$app/navigation';
    import LocationSelect from '$lib/components/LocationSelect.svelte';
    let selectedCustomer;
  
    async function onCustomerChange(e) {
      selectedCustomer = e.target.value;
      // 标记组件数据失效，触发重新加载
      await invalidate(`location-select:${selectedCustomer}`);
    }
  </script>
  
  <select on:change={onCustomerChange}>
    <!-- 客户选项列表 -->
  </select>
  <LocationSelect customerId={selectedCustomer} />
  

优点：组件封装性好，数据加载逻辑与组件绑定；可利用服务器端加载能力。
缺点：需要理解SvelteKit的invalidate机制，实现稍复杂。

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