Apa perbedaan antara +page.ts dan +page.server.ts?

`+page.ts` berjalan di server dan klien untuk pengambilan data universal, sedangkan `+page.server.ts` hanya berjalan di server. Gunakan versi server untuk operasi yang memerlukan variabel lingkungan pribadi atau akses basis data langsung.

Apakah file yang dihasilkan disimpan ke disk saya?

Tidak. Alat ini menghasilkan teks kode yang kemudian bisa Anda "copy-paste" ke IDE lokal Anda. Alat ini tidak memiliki izin untuk memodifikasi "filesystem" lokal Anda secara langsung.

Apakah ini mendukung "snippet" dan "rune" Svelte 5?

Ya. Anda dapat beralih antara sintaks "legacy" Svelte 4 dan "rune" Svelte 5 yang lebih baru termasuk `$state` dan `$derived` di dalam pengaturan.

Bisakah saya menyertakan TypeScript secara "default"?

Ya. "Generator" ini secara "default" menggunakan sintaks TypeScript untuk blok skrip dan fungsi "load", tetapi Anda dapat beralih ke JavaScript biasa jika proyek Anda membutuhkannya.

Formatter & Kode

Generator Komponen + Halaman 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

Catatan editor

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

Bab mendalam ini saat ini hanya tersedia dalam bahasa Inggris. Alat konversi di atas berfungsi dalam bahasa Anda; artikel penjelasan panjangnya belum diterjemahkan.

Pertanyaan yang sering diajukan

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.

Orang juga mencari

Fitur terkait

More in this room.

Lihat semua di Formatter & Kode