Svelteがコンポーネントフレームワークであるのに対し、SvelteKitは、本番環境に対応したアプリケーションを構築する際の難しい問題を解決するアプリケーションフレームワーク（あるいは、誰に尋ねるかによって「メタフレームワーク」）です。

• ルーティング
• サーバーサイドレンダリング
• データフェッチ
• サービスワーカー
• TypeScript統合
• プリレンダリング
• シングルページアプリケーション
• ライブラリパッケージング
• 最適化された本番ビルド
• さまざまなホスティングプロバイダーへのデプロイ
• ...など

SvelteKitアプリケーションは、デフォルトではサーバーレンダリングされます（従来の「マルチページアプリケーション」またはMPAのように）。これにより、初回読み込みのパフォーマンスとSEO特性が優れています。その後、クライアントサイドナビゲーション（最新の「シングルページアプリケーション」またはSPAのように）に移行することで、ユーザーがナビゲートしたときに（サードパーティの分析コードなどを含む）すべてを無駄に再読み込みすることを回避できます。ただし、JavaScriptが実行される場所であればどこでも実行できます。後ほど説明しますが、ユーザーはJavaScriptをまったく実行する必要がない場合があります。

複雑そうに聞こえるかもしれませんが、心配しないでください。SvelteKitは、あなたと共に成長するフレームワークです！シンプルに始めて、必要に応じて新しい機能を追加してください。

プロジェクト構造

右側のファイルツリービューアーには、SvelteKitがプロジェクト内で検出することを期待する少数のファイルが表示されます。

package.json は、Node.js を使用したことがある方ならおなじみでしょう。svelte や @sveltejs/kit などのプロジェクトの依存関係と、SvelteKit CLI と対話するためのさまざまな scripts がリストされています。（現在、下のウィンドウで npm run dev を実行しています。）

また、"type": "module" が指定されていることにも注意してください。これは、.js ファイルが、従来の CommonJS 形式ではなく、ネイティブの JavaScript モジュールとしてデフォルトで扱われることを意味します。

svelte.config.js には、プロジェクトの設定が含まれています。今のところ、このファイルについて心配する必要はありませんが、興味がある場合は、ドキュメントを参照してください。

vite.config.js には、Vite の設定が含まれています。SvelteKit は Vite を使用しているため、ホットモジュール置換、TypeScript サポート、静的アセット処理などの Vite 機能 を使用できます。

src は、アプリケーションのソースコードが配置される場所です。src/app.html はページテンプレートであり（SvelteKit は %sveltekit.head% と %sveltekit.body% を適切に置き換えます）、src/routes はアプリケーションの ルート を定義します。

最後に、static には、アプリケーションのデプロイ時に含める必要があるアセット（favicon.png や robots.txt など）が含まれています。