用語集

SvelteKitのコアは、高度に設定可能なレンダリングエンジンを提供します。このセクションでは、レンダリングについて説明する際に使用される用語の一部について説明します。これらのオプションの設定に関するリファレンスは、上記のドキュメントに記載されています。

CSR

クライアントサイドレンダリング（CSR）は、JavaScriptを使用してWebブラウザでページコンテンツを生成することです。

SvelteKitでは、デフォルトでクライアントサイドレンダリングが使用されますが、csr = falseページオプションを使用してJavaScriptを無効にすることができます。

ハイドレーション

Svelteコンポーネントは状態を保存し、状態が更新されるとDOMを更新します。SSR中にデータを取得する場合、デフォルトではSvelteKitはこれらのデータを保存し、サーバーレンダリングされたHTMLと共にクライアントに送信します。その後、コンポーネントは、同じAPIエンドポイントを再度呼び出すことなく、そのデータを使用してクライアント上で初期化できます。Svelteは、DOMが期待される状態にあることを確認し、ハイドレーションと呼ばれるプロセスでイベントリスナーをアタッチします。コンポーネントが完全にハイドレートされると、新しく作成されたSvelteコンポーネントと同様に、プロパティの変更に反応できます。

SvelteKitでは、デフォルトでページがハイドレートされますが、csr = falseページオプションを使用してJavaScriptを無効にすることができます。

プリレンダリング

プリレンダリングとは、ビルド時にページのコンテンツを計算し、表示用にHTMLを保存することです。このアプローチは、従来のサーバーサイドレンダリングされたページと同じ利点がありますが、各訪問者に対してページを再計算する必要がないため、訪問者数の増加に伴ってほぼ無料でスケールします。トレードオフは、ビルドプロセスがより高価になり、プリレンダリングされたコンテンツは、アプリケーションの新しいバージョンをビルドしてデプロイすることによってのみ更新できることです。

すべてのページがプリレンダリングできるわけではありません。基本的なルールは次のとおりです。コンテンツをプリレンダリングするには、直接アクセスする2人のユーザーがサーバーから同じコンテンツを取得する必要があり、ページにアクションを含めることはできません。すべてのユーザーが同じプリレンダリングされたコンテンツを表示する限り、ページのパラメーターに基づいて読み込まれたコンテンツでもプリレンダリングできます。

プリレンダリングされたページは静的コンテンツに限定されません。ユーザー固有のデータが取得され、クライアント側でレンダリングされる場合、パーソナライズされたページを構築できます。これは、上記で説明したように、SSRを実行しないことの欠点が発生するという注意点があります。

SvelteKitでは、prerenderページオプションとsvelte.config.jsのprerender設定を使用してプリレンダリングを制御できます。

ルーティング

デフォルトでは、新しいページに移動する場合（リンクをクリックするか、ブラウザの進む/戻るボタンを使用する場合）、SvelteKitは試行されたナビゲーションをインターセプトして処理し、ブラウザが目的のページのサーバーへのリクエストを送信することを許可しません。その後、SvelteKitは、新しいページのコンポーネントをレンダリングすることにより、クライアントで表示されるコンテンツを更新し、必要に応じてAPIエンドポイントを呼び出すことができます。試行されたナビゲーションに応答してクライアントでページを更新するこのプロセスは、クライアントサイドルーティングと呼ばれます。

SvelteKitでは、デフォルトでクライアントサイドルーティングが使用されますが、data-sveltekit-reloadを使用してスキップできます。

SPA

シングルページアプリケーション（SPA）とは、サーバーへのすべてのリクエストが単一のHTMLファイルをロードするアプリケーションであり、その後、要求されたURLに基づいて要求されたコンテンツのクライアントサイドレンダリングを実行します。すべてのナビゲーションは、クライアント側でクライアントサイドルーティングと呼ばれるプロセスで処理され、ページごとのコンテンツが更新され、共通のレイアウト要素はほとんど変更されません。SPAはSSRを提供しないため、上記で説明した欠点があります。ただし、SEOが重要ではなく、ユーザーが一定のコンピューティング環境からアプリケーションにアクセスすることがわかっているログイン後の複雑なビジネスアプリケーションなど、一部のアプリケーションではこれらの欠点の影響はそれほど大きくありません。

SvelteKitでは、adapter-staticを使用してSPAを構築できます。

SSG

静的サイトジェネレーション（SSG）とは、すべてのページがプリレンダリングされるサイトを指す用語です。SvelteKitは、一部のツールのように静的サイトジェネレーションのみを行うように構築されていないため、非常に多くのページを効率的にレンダリングするためのスケーリングが、その目的のために構築されたツールほどうまくいかない可能性があります。ただし、ほとんどの専用のSSGとは対照的に、SvelteKitは異なるページで異なるレンダリングタイプを自由に組み合わせることができます。サイトを完全にプリレンダリングすることの利点の1つは、SSRを実行するためにサーバーを維持または支払う必要がないことです。生成されると、サイトはCDNから提供されるため、優れた「最初のバイト時間」のパフォーマンスが実現します。この配信モデルは、多くの場合、JAMstackと呼ばれます。

SvelteKitでは、adapter-staticを使用するか、prerenderページオプションまたはsvelte.config.jsのprerender設定を使用して、すべてのページをプリレンダリングすることにより、静的サイトジェネレーションを実行できます。

SSR

サーバーサイドレンダリング（SSR）は、サーバーでページコンテンツを生成することです。SSRは、一般的にSEOに推奨されます。一部の検索エンジンは、クライアント側で動的に生成されるコンテンツをインデックス付けできますが、これらの場合でも時間がかかる可能性があります。また、知覚されるパフォーマンスを向上させ、JavaScriptが失敗した場合または無効になっている場合（想像以上に頻繁に発生します）でも、アプリをユーザーがアクセスできるようにします。

SvelteKitでは、デフォルトでページがサーバーサイドレンダリングされます。ssrページオプションを使用してSSRを無効にすることができます。