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.

Hybrid app

SvelteKit uses a hybrid rendering mode by default where it loads the initial HTML from the server (SSR), and then updates the page contents on subsequent navigations via client-side rendering (CSR).

ハイドレーション(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を指すときは、初期リクエストの際に空のシェルを返すという定義を使用しています。初期リクエストで HTML を提供するハイブリッドアプリと混同しないでください。SPA モードでは、レンダリングが開始される前に2つのネットワークラウンドトリップが必要になるため、パフォーマンスに大きな影響を与えます。SPA モードはパフォーマンスと 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 の観点で非常に望ましいです。SPA で必要となる余分なラウンドトリップを回避することでパフォーマンスが大幅に向上し、また、JavaScript が失敗したり無効にされている場合でも、ユーザーがアプリにアクセスできるようになります (実際、JavaScript が動作しない状況は想像以上に頻繁に発生します)。一部の検索エンジンはクライアントサイドで動的に生成されたコンテンツをインデックスできますが、その場合でも時間がかかる可能性があります。

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