+page.ts と +page.server.ts の違いは何ですか？

`+page.ts` はユニバーサルなデータ取得のためにサーバーとクライアントの両方で実行されますが、`+page.server.ts` はサーバー上でのみ実行されます。プライベートな環境変数や直接的なデータベースアクセスを必要とする操作には、サーバーバージョンを使用してください。

生成されたファイルはディスクに保存されますか？

いいえ、このツールはコードテキストを生成するだけで、それをローカルIDEにコピー＆ペーストできます。ローカルファイルシステムを直接変更する権限はありません。

Svelte 5のスニペットとルーンをサポートしていますか？

はい。設定で、従来のSvelte 4構文と、$state、$derivedなどの新しいSvelte 5ルーンを切り替えることができます。

デフォルトで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.

すべて表示フォーマッター＆コード