TL;DR
- Svelte 公式チュートリアルの Basic SvelteKit。SvelteKit のデータの読み込み、ヘッダと Cookie、フォーム、API routes、
$app/state、エラーとリダイレクトを扱う。 +page.jsのloadは、初回アクセス時にはサーバで、ページ遷移時にはブラウザで実行される。errorを使わずに投げたエラーのメッセージは、ユーザには公開されない。
内容
Loading data
SvelteKit 2 から、load 関数が返すオブジェクトのトップレベルにある Promise は自動で await されなくなった。load から $props で受け取った data は Deep reactivity ではないので、再代入しないと再描画されない。
+page.server.js は常にサーバで実行される。一方、+page.js はページが SSR されるときはサーバで、CSR されるときはブラウザで実行される。そのため、デフォルトでは初回アクセス時にはサーバで、ページ遷移時にはブラウザで呼ばれる。
Headers and cookies
load、Form actions、Hooks、API routes で使える setHeaders は、主に Cache-Control を変えるのに使う。Set-Cookie は setHeaders では設定できないので、cookies.get と cookies.set を使う。ブラウザはデフォルトで現在のパスの親を Cookie のパスにするので、アプリケーション全体で使うには path: '/' を明示する。cookies.set は内部の map も更新するので、同じリクエストの中の cookies.get は更新後の値を返す。
オプションは cookie モジュールの parse と serialize のものに対応する。SvelteKit は set のデフォルトとして httpOnly: true、secure: true、sameSite: 'lax' を指定している。
Forms
Form actions でバリデーションエラーを返すときは、fail にステータスコードとデータを渡す。そのデータはページの Props の form で受け取れる。fail で包まなくても、返した値は Props で受け取れる。
return fail(422, { description: data.get("description"), error: error.message })use:enhance を付けると、ページを再読み込みせずにブラウザ標準の POST の挙動をまねるので（Progressive Enhancement）、トランジションで装飾できる。
API routes
@sveltejs/kit の json を使うと JSON を簡単に返せ、json({ id }, { status: 201 }) のように Response コンストラクタと同じオプションを渡せる。
$app/state
$app/state は、読み取り専用の page、navigating、updated を提供する。以前の $app/stores は非推奨になった。page は現在のページの url、params、data などを持ち、内部で $state.raw を使っているのでリアクティブである。navigating はナビゲーション中だけ from、to、type を持つオブジェクトになり、ローディング表示に使える。updated はページを開いた後に新しいバージョンがデプロイされたかを表す。
Errors and redirects
@sveltejs/kit の error で作る想定されたエラーは、指定したメッセージがユーザに公開される。それ以外の予期せぬエラーは機密情報を含むかもしれないので、メッセージもスタックトレースも公開されず、デフォルトでは { "message": "Internal Error" } になる。この挙動は handleError フックで変えられる。
load 中にエラーが起きると、いちばん近い +error.svelte が描画される。ルートの +layout.svelte の load や +error.svelte の描画中のエラーでは、静的な src/error.html にフォールバックする。
リダイレクトには redirect(307, "/b") のように redirect を使う。load のほか、Form actions、API routes、handle フックの中でも使える。