ความแตกต่างระหว่าง +page.ts และ +page.server.ts คืออะไร?

`+page.ts` ทำงานทั้งบนเซิร์ฟเวอร์และไคลเอ็นต์สำหรับการดึงข้อมูลแบบ universal ในขณะที่ `+page.server.ts` ทำงานบนเซิร์ฟเวอร์เท่านั้น ใช้เวอร์ชันเซิร์ฟเวอร์สำหรับการดำเนินการที่ต้องใช้ตัวแปรสภาพแวดล้อมส่วนตัวหรือการเข้าถึงฐานข้อมูลโดยตรง

ไฟล์ที่สร้างขึ้นจะถูกบันทึกไว้ในดิสก์ของฉันหรือไม่?

ไม่. เครื่องมือนี้สร้างข้อความโค้ดที่คุณสามารถคัดลอกและวางลงใน IDE ในเครื่องของคุณได้ ไม่ได้รับอนุญาตให้แก้ไขระบบไฟล์ในเครื่องของคุณโดยตรง

รองรับ Svelte 5 snippets และ runes หรือไม่?

ใช่ คุณสามารถสลับไปมาระหว่าง Svelte 4 syntax แบบเดิมและ Svelte 5 runes ใหม่ รวมถึง `$state` และ `$derived` ได้ภายในหน้าการตั้งค่า

ฉันสามารถรวม TypeScript ได้ตามค่าเริ่มต้นหรือไม่?

ใช่ ตัวสร้างจะใช้ไวยากรณ์ TypeScript เป็นค่าเริ่มต้นสำหรับบล็อกสคริปต์และฟังก์ชันโหลด แต่คุณสามารถเปลี่ยนไปใช้ JavaScript ธรรมดาได้หากโปรเจกต์ของคุณต้องการ

ตัวจัดรูปแบบและโค้ด

ตัวสร้างคอมโพเนนต์ + หน้า 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

หมายเหตุจากบรรณาธิการ

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

บทเชิงลึกนี้มีให้บริการเฉพาะภาษาอังกฤษในขณะนี้ เครื่องมือแปลงด้านบนทำงานในภาษาของคุณ บทความอธิบายแบบยาวยังไม่ได้แปล

คำถามที่พบบ่อย

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.

ผู้คนยังค้นหา

เครื่องมือที่เกี่ยวข้อง

More in this room.

ดูทั้งหมดใน ตัวจัดรูปแบบและโค้ด