+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.

모두 보기 포매터 및 코드