サーバーサイド処理
SvelteKitのサーバーサイド処理の全体像を理解し、適切なファイルタイプと実装パターンを選択する方法を学びます。
SvelteKitのサーバーサイドアーキテクチャ
SvelteKitは、Node.jsベースのサーバーサイド処理を提供し、以下の機能を実現します。
- SSR（Server-Side Rendering）: SEOとパフォーマンスの最適化
- データプリフェッチング: 高速なページ遷移
- セキュアな処理: 機密情報の保護、認証処理
- API開発: RESTful APIエンドポイントの構築
サーバーサイドファイルの種類と役割
SvelteKitでは、ファイル名の命名規則によってサーバーサイドで実行されるコードを明確に分離できます。
ダイアグラムを読み込み中...
| ファイルタイプ | 実行タイミング | 主な用途 |
|---|---|---|
| +page.server.ts | ページのSSR時 | ページ固有のデータ取得、Form Actions |
| +layout.server.ts | レイアウトのSSR時 | 共通データ取得、認証チェック |
| +server.ts | APIリクエスト時 | RESTful APIエンドポイント |
| hooks.server.ts | すべてのリクエスト | 認証、ログ、エラー処理、CORS |
ファイル選択のガイドライン
- ページデータが必要 →
+page.server.ts - 複数ページで共通のデータ →
+layout.server.ts - JSON APIが必要 →
+server.ts - すべてのリクエストで実行 →
hooks.server.ts
リクエスト処理フロー
以下の図は、クライアントからのリクエストがどのように処理されるかを示しています。
ダイアグラムを読み込み中...
セキュリティモデル
SvelteKitのサーバーサイド処理は、機密情報を安全に扱うための明確な境界を提供します。
ダイアグラムを読み込み中...
クライアントサイドとサーバーサイドの区別
| 実行場所 | アクセス可能な情報 | ファイルタイプ |
|---|---|---|
| サーバーのみ | 環境変数、データベース、APIキー | *.server.ts、$lib/server/ |
| 両方 | 公開情報、公開API URL | *.ts、*.svelte |
重要なセキュリティ原則
- 機密情報（APIキー、DBパスワード等）は
*.server.tsまたは$lib/server/に配置 - 環境変数は
$env/static/privateを使用（process.envも可） - クライアントに送信するデータは必要最小限に絞る
実装パターンへのリンク
SvelteKitのサーバーサイド機能は、用途に応じて以下のトピックに分かれています。詳細は各ページを参照してください。
アーキテクチャの詳細
SvelteKitの内部動作やレンダリングパイプラインについて深く理解したい場合は、以下のページを参照してください。
- アーキテクチャ概要 - SvelteKitのアーキテクチャ全体像
- レンダリングパイプライン - コンパイルから実行まで
- データロードアーキテクチャ - Load関数の内部動作
まとめ
SvelteKitのサーバーサイド処理は、以下の原則に基づいて設計されています。
- 明確な境界 - ファイル名規則による実行環境の区別
- セキュリティファースト - 機密情報の安全な取り扱い
- 柔軟性 - SSR、API、リアルタイム通信など多様なユースケースに対応
- 型安全性 - TypeScriptとの完全な統合
各実装パターンの詳細は、上記リンクから該当ページを参照してください。