¿Cuál es la diferencia entre +page.ts y +page.server.ts?

`+page.ts` se ejecuta tanto en el servidor como en el cliente para la recuperación universal de datos, mientras que `+page.server.ts` solo se ejecuta en el servidor. Use la versión del servidor para operaciones que requieran variables de entorno privadas o acceso directo a la base de datos.

¿Los archivos generados se guardan en mi disco?

No. Esta herramienta genera el texto del código que luego puedes copiar y pegar en tu IDE local. No tiene permiso para modificar tu sistema de archivos local directamente.

¿Soporta esta herramienta los snippets y 'runes' de Svelte 5?

Sí. Puedes alternar entre la sintaxis heredada de Svelte 4 y los 'runes' más recientes de Svelte 5, incluyendo `$state` y `$derived` dentro de la configuración.

¿Puedo incluir TypeScript por defecto?

Sí. El generador por defecto utiliza la sintaxis de TypeScript para los bloques de script y las funciones de carga, pero puedes cambiar a JavaScript puro si tu proyecto lo requiere.

Formateadores y código

Generador de Componentes + Páginas 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 del editor

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

Este capítulo en profundidad está disponible solo en inglés por el momento. La herramienta de conversión de arriba funciona en tu idioma; el artículo explicativo extenso aún no se ha traducido.

Preguntas frecuentes

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.

La gente también busca

Herramientas relacionadas

More in this room.

Ver todo en Formateadores y código