Sự khác biệt giữa +page.ts và +page.server.ts là gì?

`+page.ts` chạy trên cả máy chủ và máy khách để tìm nạp dữ liệu chung, trong khi `+page.server.ts` chỉ chạy trên máy chủ. Sử dụng phiên bản máy chủ cho các hoạt động yêu cầu biến môi trường riêng tư hoặc truy cập cơ sở dữ liệu trực tiếp.

Các tệp được tạo có được lưu vào đĩa của tôi không?

Không. Công cụ này tạo ra mã văn bản mà bạn có thể sao chép và dán vào IDE cục bộ của mình. Nó không có quyền sửa đổi trực tiếp hệ thống tệp cục bộ của bạn.

Công cụ này có hỗ trợ các đoạn mã và runes của Svelte 5 không?

Có. Bạn có thể chuyển đổi giữa cú pháp Svelte 4 cũ và các runes Svelte 5 mới hơn bao gồm `$state` và `$derived` trong phần cài đặt.

Tôi có thể đưa TypeScript vào theo mặc định không?

Có. Trình tạo mặc định là cú pháp TypeScript cho các khối script và chức năng tải, nhưng bạn có thể chuyển sang JavaScript thuần túy nếu dự án của bạn yêu cầu.

Công cụ định dạng & Mã

Trình tạo Component + Trang 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

Ghi chú của biên tập viên

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

Chương phân tích chuyên sâu này hiện chỉ có sẵn bằng tiếng Anh. Công cụ chuyển đổi ở trên hoạt động bằng ngôn ngữ của bạn; bài viết giải thích dài chưa được dịch.

Các câu hỏi thường gặp

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.

Mọi người cũng tìm kiếm

Công cụ liên quan

More in this room.

Xem tất cả trong Công cụ định dạng & Mã