+page.ts 和 +page.server.ts 有什么区别？

`+page.ts` 在服务器和客户端上都运行以进行通用数据获取，而 `+page.server.ts` 只在服务器上运行。对于需要私有环境变量或直接数据库访问的操作，请使用服务器版本。

生成的文件会保存到我的磁盘吗？

不会。此工具生成代码文本，您可以将其复制并粘贴到本地 IDE 中。它没有直接修改本地文件系统的权限。

这是否支持 Svelte 5 代码片段和 rune？

是的。您可以在设置中切换旧版 Svelte 4 语法和新的 Svelte 5 rune，包括 `$state` 和 `$derived`。

我可以默认包含 TypeScript 吗？

是的。生成器默认使用 TypeScript 语法用于脚本块和加载函数，但如果您的项目需要，您可以切换到纯 JavaScript。

格式化与代码

SvelteKit 组件 + 页面生成器

+page.svelte, +page.server.ts and load functions in one go.

Runs in your browser

RouteServer load()Form actions

src/routes/blog/[slug]/+page.svelte

<script lang="ts">
  import type { PageData } from "./$types";
  let { data }: { data: PageData } = $props();
</script>

<svelte:head>
  <title>Page title</title>
</svelte:head>

<main class="p-6">
  <h1>{data.slug}</h1>
</main>

lines: 13chars: 229size: 229 B

live

src/routes/blog/[slug]/+page.server.ts

import type { PageServerLoad, Actions } from "./$types";

export const load: PageServerLoad = async ({ params }) => {
  return { slug: params.slug };
};

export const actions: Actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const value = data.get("name")?.toString();
    return { success: true, value };
  },
};

lines: 14chars: 360size: 360 B

live

编辑注

Understanding · +page, +page.server, +layout — that's it.

本深度章节目前仅有英文版本。上方的转换工具支持您的语言;长篇说明文章尚未翻译。

常见问题

Quick answers.

›What is the difference between +page.ts and +page.server.ts?

`+page.ts` runs on both the server and the client for universal data fetching, while `+page.server.ts` only runs on the server. Use the server version for operations requiring private environment variables or direct database access.

›Are the generated files saved to my disk?

No. This tool generates the code text which you can then copy and paste into your local IDE. It does not have permission to modify your local filesystem directly.

›Does this support Svelte 5 snippets and runes?

Yes. You can toggle between legacy Svelte 4 syntax and the newer Svelte 5 runes including `$state` and `$derived` within the settings.

›Can I include TypeScript by default?

Yes. The generator defaults to TypeScript syntax for script blocks and load functions, but you can switch to plain JavaScript if your project requires it.

大家也在搜索

More in this room.

查看所有格式化与代码