В чем разница между +page.ts и +page.server.ts?

`+page.ts` выполняется как на сервере, так и на клиенте для универсальной выборки данных, тогда как `+page.server.ts` выполняется только на сервере. Используйте серверную версию для операций, требующих приватных переменных среды или прямого доступа к базе данных.

Сохраняются ли сгенерированные файлы на моем диске?

Нет. Этот инструмент генерирует текстовый код, который вы можете скопировать и вставить в свою локальную IDE. Он не имеет разрешения напрямую изменять вашу локальную файловую систему.

Поддерживает ли это сниппеты и руны Svelte 5?

Да. Вы можете переключаться между устаревшим синтаксисом Svelte 4 и новыми рунами Svelte 5, включая `$state` и `$derived`, в настройках.

Могу ли я подключить TypeScript по умолчанию?

Да. Генератор по умолчанию использует синтаксис TypeScript для блоков скриптов и функций загрузки, но вы можете переключиться на чистый JavaScript, если это требуется вашему проекту.

Форматтеры и код

SvelteKit Component + Page Generator

+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.

Смотреть все в Форматтеры и код