Quelle est la différence entre +page.ts et +page.server.ts ?

`+page.ts` s'exécute à la fois sur le serveur et le client pour la récupération universelle de données, tandis que `+page.server.ts` ne s'exécute que sur le serveur. Utilisez la version serveur pour les opérations nécessitant des variables d'environnement privées ou un accès direct à la base de données.

Les fichiers générés sont-ils enregistrés sur mon disque ?

Non. Cet outil génère le texte du code que vous pouvez ensuite copier-coller dans votre IDE local. Il n'a pas la permission de modifier directement votre système de fichiers local.

Est-ce que cela prend en charge les extraits et les "runes" de Svelte 5 ?

Oui. Vous pouvez basculer entre la syntaxe legacy de Svelte 4 et les nouvelles "runes" de Svelte 5, y compris `$state` et `$derived` dans les paramètres.

Puis-je inclure TypeScript par défaut ?

Oui. Le générateur utilise par défaut la syntaxe TypeScript pour les blocs de script et les fonctions de chargement, mais vous pouvez passer au JavaScript simple si votre projet l'exige.

Formateurs & Code

Générateur de Composants + Pages 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

Note de la rédaction

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

Ce chapitre approfondi n'est actuellement disponible qu'en anglais. L'outil de conversion ci-dessus fonctionne dans votre langue ; le long article explicatif n'a pas encore été traduit.

Questions fréquentes

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.

Les internautes recherchent aussi

Outils similaires

More in this room.

Tout voir dans Formateurs & Code