Glossary
SvelteKitのコアは、高度に設定可能(configurable)なレンダリングエンジンを提供します。このセクションでは、レンダリングについてディスカッションする際に使用されるいくつかの用語を説明します。これらのオプションを設定するためのリファレンスは、上記のドキュメントで提供されています。
CSR
クライアントサイドレンダリング(Client-side rendering (CSR))とは、JavaScriptを使用してWebブラウザ上でページコンテンツを生成することです。
SvelteKit では、デフォルトでクライアントサイドレンダリングが使用されますが、csr = false ページオプションで JavaScript をオフにすることができます。
Edge
Rendering on the edge refers to rendering an application in a content delivery network (CDN) near the user. Edge rendering allows the request and response for a page to travel a shorter distance thus improving latency.
ハイドレーション(Hydration)
Svelte コンポーネントは、何らかの状態を保存し、状態が更新されると DOM を更新します。SSR 中にデータをフェッチするとき、デフォルトでは SvelteKit はこのデータを保存し、サーバーレンダリングされた HTML と一緒にクライアントに送信します。それからコンポーネントは、同じ API エンドポイントを再度呼び出すことなく、クライアント側でそのデータを使用して初期化されます。そして Svelte はハイドレーション(Hydration)と呼ばれるプロセスで DOM が想定通りの状態にあることをチェックしてイベントリスナーをアタッチします。コンポーネントが完全にハイドレートされると、新しく作成された Svelte コンポーネントと同じように、プロパティの変更に反応(react)することができます。
SvelteKit では、デフォルトでページがハイドレーションされますが、csr = false ページオプションで JavaScript をオフにすることができます。
ISR
Incremental static regeneration (ISR) allows you to generate static pages on your site as visitors request those pages without redeploying. This may reduces build times compared to SSG sites with a large number of pages. You can do ISR with adapter-vercel.
MPA
Traditional applications that render each page view on the server — such as those written in languages other than JavaScript — are often referred to as multi-page apps (MPA).
プリレンダリング
プリレンダリング(Prerendering)とは、ビルド時にページのコンテンツを計算し、表示のために HTML を保存しておくことを意味します。このアプローチは旧来のサーバーレンダリングページと同じ利点を持ちつつ、訪問者ごとにページを再計算する必要がないため、訪問者数の増加に対してほぼ無償でスケールします。トレードオフとしては、ビルドプロセスのコストがより高くなり、プリレンダリングされたコンテンツはアプリケーションの新しいバージョンをデプロイすることでしか更新できなくなります。
全てのページがプリレンダリングできるわけではありません。基本的なルールは次の通りです: コンテンツがプリレンダリング可能であると言うためには、それを直接表示する2人のユーザーが、サーバーから同じコンテンツを取得できなけれならず、かつ、そのページには actions が含まれていてはいけません。全てのユーザーが同じプリレンダリングコンテンツを見ることができるのであれば、ページのパラメータに基づいてロードされるコンテンツはプリレンダリングが可能である点にご注意ください。
プリレンダリングされるページは静的なコンテンツに限りません。クライアントサイドでユーザ固有のデータをフェッチしてレンダリングする場合は、パーソナライズされたページを構築することができます。ただし、前述の通り、そのコンテンツに対して SSR を行わないことによるデメリットが発生することにご注意ください。
SvelteKit では、prerender ページオプション と、svelte.config.js の prerender コンフィグ によってプリレンダリングをコントロールできます。
PWA
A progressive web app (PWA) is an app that’s built using web APIs and technologies, but functions like a mobile or desktop app. Sites served as PWAs can be installed, allowing you to add a shortcut to the application on your launcher, home screen, or start menu. Many PWAs will utilize service workers to build offline capabilities.
ルーティング
デフォルトでは、(リンクをクリックしたりブラウザの 進む または 戻る ボタンを使って)新しいページにナビゲートするとき、SvelteKit はナビゲーションをインターセプトし、ブラウザが移動先のページのリクエストをサーバーにリクエストする代わりに、それを処理します。それから SvelteKit は新しいページのコンポーネントをレンダリングし、そのときに順番に必要な API エンドポイントをコールし、クライアントの表示コンテンツを更新します。このような、ナビゲーションが行われる際にそれに応じてクライアント側でページを更新するプロセスのことを、クライアントサイドルーティングと呼びます。
SvelteKit では、デフォルトでクライアントサイドルーティングが使用されますが、data-sveltekit-reload でこれをスキップすることができます。
SPA
シングルページアプリ(single-page app (SPA))とは、サーバーへの全てのリクエストで単一のHTMLをロードし、コンテンツのクライアントサイドレンダリングをリクエストされたURLに基づいて行うアプリケーションのことです。全てのナビゲーションはクライアントサイドで(クライアントサイドルーティングと呼ばれるプロセスで)処理され、ページごとのコンテンツは更新されるが共通のレイアウト要素はほとんど更新されません。SPA は SSR を提供しないため、パフォーマンスと SEO 悪化します。しかし、SEOが重要ではない、ユーザーが一貫したコンピューティング環境からアプリケーションにアクセスすることがわかっているような、ログインの背後にある複雑なビジネスアプリケーションなどの場合は、これらの欠点による大きな影響を受けません。
SvelteKit では、adapter-static を使って SPA を構築 することができます。
SSG
静的サイト生成(Static Site Generation (SSG))とは、全てのページがプリレンダリングされているサイトを指す用語です。サイトを完全にプリレンダリングすることの利点の1つは、SSRを実行するためのサーバーを維持したり費用を払ったりする必要がないことです。一度生成すれば、そのサイトは CDN から提供することができ、”time to first byte” の優れたパフォーマンスにつながります。このデリバリーモデルはしばしば JAMstack と呼ばれます。
SvelteKit では、adapter-static を使用したり、prerender ページオプション や svelte.config.js の prerender コンフィグ で全ページをプリレンダリングするようにしたりすることで SSG を行うことができます。
SSR
サーバーサイドレンダリング(Server-side rendering (SSR))とは、サーバー上でページコンテンツを生成することです。SSR は一般的に SEO の観点で好まれます。クライアントサイドで生成される動的なコンテンツをインデックスできる検索エンジンもありますが、その場合でもそれに時間がかかることがあります。知覚的なパフォーマンスも改善される傾向にあり、もしJavaScriptが失敗したり無効になっている場合でも(あなたが思うより頻繁に発生しています)、ユーザーがアプリにアクセスできるようになります。
SvelteKit では、デフォルトでページがサーバーサイドレンダリングされます。ssr ページオプション で SSR を無効化できます。