Was ist der Unterschied zwischen +page.ts und +page.server.ts?

`+page.ts` läuft sowohl auf dem Server als auch auf dem Client für universelles Data Fetching, während `+page.server.ts` nur auf dem Server läuft. Verwenden Sie die Server-Version für Operationen, die private Umgebungsvariablen oder direkten Datenbankzugriff erfordern.

Werden die generierten Dateien auf meiner Festplatte gespeichert?

Nein. Dieses Tool generiert den Code-Text, den Sie dann kopieren und in Ihre lokale IDE einfügen können. Es hat keine Berechtigung, Ihr lokales Dateisystem direkt zu ändern.

Unterstützt dies Svelte 5 Snippets und Runes?

Ja. Sie können in den Einstellungen zwischen der älteren Svelte 4-Syntax und den neueren Svelte 5 Runes, einschließlich `$state` und `$derived`, wechseln.

Kann ich TypeScript standardmäßig einbinden?

Ja. Der Generator verwendet standardmäßig die TypeScript-Syntax für Skriptblöcke und Ladefunktionen, Sie können jedoch zu reinem JavaScript wechseln, wenn Ihr Projekt dies erfordert.

Formatierer & Code

SvelteKit Komponente + Seiten-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

Anmerkung der Redaktion

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

Dieses ausführliche Kapitel ist derzeit nur auf Englisch verfügbar. Das Konvertierungstool oben funktioniert in Ihrer Sprache; der lange Erklärtext wurde noch nicht übersetzt.

Häufig gestellte Fragen

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.

Andere suchten auch nach

Verwandte Tools

More in this room.

Alle anzeigen in Formatierer & Code