Wat is het verschil tussen +page.ts en +page.server.ts?

`+page.ts` draait zowel op de server als de client voor universele data-ophaling, terwijl `+page.server.ts` alleen op de server draait. Gebruik de serverversie voor operaties die privé-omgevingsvariabelen of directe database-toegang vereisen.

Worden de gegenereerde bestanden op mijn schijf opgeslagen?

Nee. Deze tool genereert de code die u vervolgens kunt kopiëren en plakken in uw lokale IDE. Het heeft geen toestemming om uw lokale bestandssysteem direct te wijzigen.

Ondersteunt dit Svelte 5 snippets en runes?

Ja. U kunt schakelen tussen de oudere Svelte 4-syntaxis en de nieuwere Svelte 5-runes, inclusief `$state` en `$derived`, binnen de instellingen.

Kan ik standaard TypeScript opnemen?

Ja. De generator gebruikt standaard TypeScript-syntaxis voor scriptblokken en laadfuncties, maar u kunt overschakelen naar gewoon JavaScript als uw project dit vereist.

Formatters & Code

SvelteKit Component + Pagina 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

Redactionele opmerking

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

Dit uitgebreide hoofdstuk is momenteel alleen in het Engels beschikbaar. De conversietool hierboven werkt in jouw taal; de lange uitleg is nog niet vertaald.

Veelgestelde vragen

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.

Mensen zoeken ook naar

Gerelateerde tools

More in this room.

Bekijk alles in Formatters & Code