よっしー
こんにちは。よっしーです(^^)
今日は、SvelteKitにおける用語集について解説しています。
スポンサーリンク
背景
SvelteKitにおける用語について調査する機会がありましたので、その時の内容を備忘として記事に残しました。
用語集
SvelteKitのコアは高度に設定可能なレンダリングエンジンを提供します。このセクションではレンダリングについて議論する際に使用される用語を説明します。これらのオプションを設定するためのリファレンスは次回以降の記事に記載していきます。
- CSR (クライアントサイドレンダリング)
- ハイドレーション
- プリレンダリング
- ルーティング
- SPA (シングルページアプリケーション)
- SSG (静的サイト生成)
- SSR (サーバーサイドレンダリング)
SSR (サーバーサイドレンダリング)
サーバーサイドレンダリングは、サーバー上でページコンテンツを生成することです。SSRは一般的にSEOに適しています。一部の検索エンジンはクライアントサイドで動的に生成されるコンテンツもインデックス化できますが、その場合でも時間がかかる可能性があります。また、体感性能を向上させ、JavaScriptが失敗または無効化された場合（思っているより頻繁に発生します）でもアプリケーションにアクセスできるようにします。
SvelteKitでは、ページはデフォルトでサーバーサイドレンダリングされます。ssrページオプションでSSRを無効にできます。
解説
- SSRの主な利点：
- SEO対策に効果的
- 初期表示が高速
- JavaScriptなしでも動作
- 技術的特徴：
- サーバーでHTML生成
- クライアントに完成したHTMLを送信
- 検索エンジンが認識しやすい
- SvelteKitでの実装：
- デフォルトで有効
- 必要に応じて無効化可能
サンプルコード
SSRの基本的な実装例を示します：
// src/routes/+page.server.js
export async function load() {
// サーバーサイドでデータ取得
const data = await fetchData();
return { data };
}
// src/routes/+page.svelte
<script>
export let data; // サーバーから受け取ったデータ
</script>
<h1>{data.title}</h1>
<div>{data.content}</div>
// SSRを無効化する例
// src/routes/+page.js
export const ssr = false;解説：
- データフェッチ：
+page.server.jsでサーバー側データ取得load関数でデータを返却
- レンダリング：
- サーバーでHTMLを生成
- 完成したHTMLをクライアントに送信
- SSR無効化：
- 特定ページで
ssr = falseを設定 - SPAのような動作に変更可能
おわりに
今日は、 SvelteKitにおける用語について解説しました。
よっしー
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント