【ぷりれんだりんぐ】

プリレンダリングとは？

最終更新: 2026年10月8日

💡 ページを使う前に、準備を進めておく

ページを使う前にHTMLの生成や描画を進めておくこと。サイトのビルド時にHTMLを生成する方式と、ブラウザが次に開きそうなページを裏で描画する機能などがある。

📌 このページのポイント

上は静的サイト生成の例。下はブラウザの先読みで、描画やJavaScript実行を進める。候補ページへ移動し、準備ができている場合に表示を速められる。

ひよこ

プリレンダリングって、プリフェッチとどう違うの？

ペンギン先生

ブラウザの先読みでいうと、プリフェッチはデータの取得、プリレンダリングはその先の描画やJavaScript実行まで進めることだよ。同じ言葉が、サイト側で事前にHTMLを作る意味にも使われるんだ。

ひよこ

サイト側で事前に作るって？

ペンギン先生

静的サイト生成（SSG）なら、ビルド時にHTMLを用意しておき、アクセスが来たら配信するんだ。ブログのようなページで使えるよ。

ひよこ

SSRとは何が違うの？

ペンギン先生

リクエスト時のSSRはアクセスを受けてからHTMLを作るよ。ビルド時の事前生成とは作るタイミングが違うんだ。一つのサイトでページごとに使い分けることもできるよ。

ひよこ

一度作れば、ずっとそのままでいい？

ペンギン先生

記事を更新したらHTMLも作り直す必要があるよ。また、表示用HTMLがあっても、操作にJavaScriptが必要な部分はあるんだ。事前生成だけで表示速度や検索順位が必ず良くなるとは言えないね。

ひよこ

ブラウザのプリレンダリングは何をするの？

ペンギン先生

次に開きそうなページを見えない場所で読み込み、描画を進めるよ。準備できたページへ移動すれば速く表示できるけれど、開かなかったページにも通信やメモリを使うので、候補の選び方が大切なんだ。

まとめ：ざっくりこれだけ覚えればOK！

「プリレンダリング」って出てきたら「使う前にページの生成や描画を進めておく」と思えばだいたいOK！

📖 おまけ：英語の意味

「Pre-render」＝事前描画

💬 「pre（前もって）」と「render（描画する）」を組み合わせた言葉だよ。

参考資料