Qual è la differenza tra +page.ts e +page.server.ts?

`+page.ts` viene eseguito sia sul server che sul client per un fetching dati universale, mentre `+page.server.ts` viene eseguito solo sul server. Usa la versione server per operazioni che richiedono variabili d'ambiente private o accesso diretto al database.

I file generati vengono salvati sul mio disco?

No. Questo strumento genera il testo del codice che puoi poi copiare e incollare nel tuo IDE locale. Non ha il permesso di modificare direttamente il tuo filesystem locale.

Questo supporta gli snippet e le rune di Svelte 5?

Sì. Puoi alternare tra la sintassi legacy di Svelte 4 e le nuove rune di Svelte 5, inclusi `$state` e `$derived`, all'interno delle impostazioni.

Posso includere TypeScript per impostazione predefinita?

Sì. Il generatore utilizza per impostazione predefinita la sintassi TypeScript per i blocchi di script e le funzioni di caricamento, ma puoi passare a JavaScript puro se il tuo progetto lo richiede.

Formattatori e Codice

Generatore di componenti + pagine 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

Nota dell'editore

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

Questo capitolo approfondito è attualmente disponibile solo in inglese. Lo strumento di conversione qui sopra funziona nella tua lingua; il lungo articolo esplicativo non è stato ancora tradotto.

Domande frequenti

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.

Le persone cercano anche

Strumenti correlati

More in this room.

Vedi tutto in Formattatori e Codice