SvelteKit Remote Functions：第一部分

SvelteKit 正在测试一种处理数据的新方式。它被称为 Remote Functions。这项功能允许客户端和服务器之间进行轻松的通信。

什么是 Remote Functions？

Remote Functions 允许你从 SvelteKit 应用的任何部分调用服务端逻辑。尽管你是从客户端调用的，但代码会在服务端运行。这意味着你可以安全地访问数据库或私有环境变量。

如何启用

你必须在 svelte.config.js 文件中开启实验模式：

const config = {
    kit: {
        experimental: {
            remoteFunctions: true
        }
    },
    compilerOptions: {
        experimental: {
            async: true
        }
    }
};

export default config;

使用 Query

你可以通过使用扩展名为 .remote.js 或 .remote.ts 的文件来创建 remote functions。共有四种类型：

  • query（用于获取数据）
  • form
  • command
  • prerender

query 函数的工作方式类似于 HTTP GET 请求。你可以将其导入到 Svelte 组件中，并使用 await 来获取数据。

Remote query 示例：

import { query } from '$app/server';
import * as db from '$lib/server/database';

export const getPosts = query(async () => {
    const posts = await db.sql`SELECT title, slug FROM post`;
    return posts;
});

在你的组件中，可以这样使用：

{#each await getPosts() as { title, slug }}
    <li>{title}</li>
{/each}

管理状态

query 函数提供了三个有用的属性来管理你的 UI：

  • loading：正在获取数据时为 true。
  • error：如果请求失败，则为 true。
  • current：保存成功获取的数据。

智能特性

  1. 验证：你可以使用 Zod 或 Valibot 等库来验证传递给 query 的参数。这能保证你的服务端安全。

  2. 数据处理：SvelteKit 使用 devalue 来发送数据。这支持 Date 和 Map 等复杂类型，而标准的 JSON 很难做到这一点。

  3. 去重：如果你使用相同的参数多次调用同一个 query，SvelteKit 只会运行一次。这可以防止额外的数据库负载。

  4. 刷新：你可以对 query 调用 .refresh()，以便立即从服务端获取最新数据。

注意：这些功能目前处于实验阶段。语法可能会在未来的更新中发生变化。

来源：https://dev.to/nnutnonn/sveltekit-kaarthamngaankab-remote-function-part-1-4hg4