ما الفرق بين +page.ts و +page.server.ts؟

يعمل `+page.ts` على كل من الخادم والعميل لجلب البيانات الشامل، بينما يعمل `+page.server.ts` على الخادم فقط. استخدم إصدار الخادم للعمليات التي تتطلب متغيرات بيئة خاصة أو وصول مباشر إلى قاعدة البيانات.

هل يتم حفظ الملفات التي تم إنشاؤها على قرصي؟

لا. تقوم هذه الأداة بإنشاء نص الكود الذي يمكنك نسخه ولصقه في بيئة التطوير المتكاملة (IDE) المحلية الخاصة بك. ليس لديها إذن لتعديل نظام الملفات المحلي الخاص بك مباشرة.

هل هذا يدعم مقتطفات ورموز Svelte 5 (Svelte 5 snippets and runes)؟

نعم. يمكنك التبديل بين بناء جملة Svelte 4 القديم ورموز Svelte 5 الأحدث بما في ذلك `$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.

شاهد الكل في المنسقات والكود