SvelteKit中调用+page.server.js实现无URL参数的Load More方案问询

方案1：使用Form Actions（贴合SvelteKit生态，推荐） #

你可以在+page.server.js里定义action处理加载更多请求，把skip放在请求体中传递，完全不会暴露在URL里。

步骤1：在+page.server.js中添加action #

// +page.server.js
// 页面初始加载逻辑
export async function load() {
  const initialSkip = 0;
  const limit = 10;
  // 你的MongoDB查询逻辑
  const initialItems = await fetchMongoData(initialSkip, limit);
  return {
    items: initialItems,
    nextSkip: initialSkip + limit
  };
}

// 定义加载更多的action
export const actions = {
  loadMore: async ({ request }) => {
    const formData = await request.formData();
    const skip = parseInt(formData.get('skip'));
    const limit = 10;
    
    const moreItems = await fetchMongoData(skip, limit);
    return {
      moreItems,
      nextSkip: skip + limit
    };
  }
};

步骤2：在+page.svelte中调用action并更新数据 #

用use:enhance处理表单提交，避免页面刷新，同时更新本地数据：

<script>
  export let data; // 接收load函数返回的初始数据
  let items = data.items;
  let nextSkip = data.nextSkip;
  let isLoading = false;

  async function handleLoadMore(event) {
    isLoading = true;
    // 获取action返回的结果
    const result = await event.detail.apply();
    if (result.type === 'success') {
      items = [...items, ...result.data.moreItems];
      nextSkip = result.data.nextSkip;
    }
    isLoading = false;
  }
</script>

<div>
  {#each items as item}
    <div>{item.content}</div>
  {/each}
</div>

<form method="POST" action="?/loadMore" use:enhance={handleLoadMore}>
  <input type="hidden" name="skip" value={nextSkip} />
  <button type="submit" disabled={isLoading}>
    {isLoading ? '加载中...' : '加载更多'}
  </button>
</form>

方案2：直接Fetch调用Server Endpoint #

如果不想用表单，也可以单独写一个+server.js作为API端点，前端用fetch发送POST请求传递skip：

步骤1：创建+server.js #

// src/routes/your-path/+server.js
export async function POST({ request }) {
  const { skip, limit } = await request.json();
  const moreItems = await fetchMongoData(skip, limit);
  return new Response(JSON.stringify({
    moreItems,
    nextSkip: skip + limit
  }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

步骤2：在+page.svelte中用fetch调用 #

<script>
  export let data;
  let items = data.items;
  let nextSkip = data.nextSkip;
  let isLoading = false;

  async function loadMore() {
    isLoading = true;
    const res = await fetch('/your-path', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        skip: nextSkip,
        limit: 10
      })
    });
    const result = await res.json();
    items = [...items, ...result.moreItems];
    nextSkip = result.nextSkip;
    isLoading = false;
  }
</script>

<div>
  {#each items as item}
    <div>{item.content}</div>
  {/each}
</div>

<button on:click={loadMore} disabled={isLoading}>
  {isLoading ? '加载中...' : '加载更多'}
</button>

关于+page.js的角色说明 #

+page.js是客户端/通用端的load函数，核心作用是：

• 处理客户端侧的数据逻辑（比如本地缓存、数据过滤转换）
• 可以调用+page.server.js的load函数（通过fetch或parent方法），但加载更多属于动态操作，不需要通过它触发server端load
• 如果需要在客户端和服务端共享数据处理逻辑（比如统一分页规则），可以把逻辑写在+page.js里再传递给server端

举个简单的共享逻辑例子：

// +page.js
export async function load({ fetch }) {
  // 调用server端load获取初始数据
  const serverData = await fetch('/your-path').then(res => res.json());
  // 客户端侧额外处理数据
  const processedItems = serverData.items.filter(item => item.isActive);
  return {
    items: processedItems,
    nextSkip: serverData.nextSkip
  };
}

但加载更多的动态操作，直接在+page.svelte里调用action或fetch更直接，+page.js不需要参与这个流程。

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