Basic Svelte
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
プリレンダリングとは、リクエストのたびに動的にレンダリングするのではなく、ビルド時に1度だけ HTML を生成することを意味します。
利点は、静的データの配信が圧倒的にチープでハイパフォーマンスなことにあります。cache-control ヘッダー (これは間違いやすいことです) のことを気にすることなく、大人数のユーザーに配信することができるようになります。
トレードオフは、ビルドプロセスの時間が長くなることと、プリレンダリングされたコンテンツを更新するにはアプリケーションの新バージョンをビルドしてデプロイしなければならないことです。
ページをプリレンダリングするには、prerender を true に設定します。
export const prerender = true;このチュートリアルでは、アプリケーションが dev モードで実行されているため、目で見てわかるような効果はありません。
全てのページをプリレンダリングできるわけではありません。基本的なルールはこうです: コンテンツがプリレンダリング可能であると言うためには、それを直接表示する2人のユーザーが、サーバーから同じコンテンツを取得できなけれならず、ページには form actions が含まれていないこと。動的なルートパラメータ(route parameters)を持つページは、prerender.entries 設定で指定されているか、prerender.entries で指定されているページからリンクを辿って到達できるのであれば、プリレンダリングすることができます。
最上位(root)の
+layout.server.jsでprerenderをtrueに設定した場合、実質的には SvelteKit は静的サイトジェネレーター (static site generator, SSG) になります。
<h1>Prerendering</h1>