プログラミング

SvelteKitの handleFetch フックを使うと、load 関数内で実行されるサーバー側の fetch をインターセプトしてリクエストを変更できます。

SvelteKitの snapshot を使うと、ページを離れるときに状態を保存し、ブラウザの「戻る」で戻ったときに復元できます。フォームに入力中に誤って別ページに遷移してしまっても、戻ったときに入力内容が残ります。

SvelteKitの +server.ts で作ったAPIを別オリジンから呼び出すには、CORSヘッダーの設定が必要です。

SvelteKitでは $app/navigation から関数をインポートすることで、JavaScriptからナビゲーションを制御できます。<a> タグでは対応できない条件付き遷移や離脱確認などに使います。

SvelteKitでは $app/state から page オブジェクトをインポートすることで、コンポーネントのどこからでも現在のURL・パラメータ・ルート情報にアクセスできます。

SvelteKitでは、load 関数から Promise をそのまま返すことで、データの一部を後から流し込むストリーミングが実現できます。重いクエリが完了するまでページ全体を待たせずに、段階的に表示できるのがメリットです。

SvelteKitでは、1つのページに複数のフォームアクションを定義できます。これを Named Actions（名前付きアクション） と呼びます。TODOアプリの「追加・完了・削除・ログアウト」を例に整理します。

SvelteKitの応用的なルーティングパターンを整理します。ページネーションや可変長パスなど、実務でよく必要になる場面で使います。

TypeScriptには型を変換・加工するユーティリティ型が組み込まれています。SvelteKitのコードでも頻繁に使います。

SvelteKitはページごとにレンダリング方式を切り替えられます。実務でパフォーマンスやSEOの要件に応じて使い分けます。