プリレンダリングとは、リクエストのたびに動的にレンダリングするのではなく、ビルド時に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>