【Next.js】Pre-renderingについて分かりやすく解説

今回は、Next.jsのPre-renderingについての内容になります!

Pre-renderingを学ぶことで表示速度の優れたページ・SEOの強いページを作成することができるので、分からない方はこの記事を読んで学んでみませんか?

最後まで読んで頂けると幸いです!

では、Next.jsのPre-renderingについて解説していきます!

Pre-renderingとは?

Pre-renderingとは事前にHTMLファイルを生成し、レンダリングすることを指しています。

通常の場合、レンダリングはユーザーのページアクセス時に行われます。

ですが、Pre-renderingをしているページであればユーザーのアクセス時に事前に生成されているHTMLファイルを出力するので表示速度が速くなります!

Pre-renderingされているページは事前にページが生成され、コンテンツの内容の多くをクローラーに見せることができますのでSEO的に強いというメリットもあります!

Next.jsは基本的に全ページPre-renderingに対応しています!

次の内容では、2種類のPre-renderingについて解説していきます!

2種類のPre-rendering

下記では、2種類のPre-renderingについて解説していきます!

Static Generation

Static Generationは、ビルドの段階でHTMLファイルが生成されます!

Next.jsは、Static GenerationでのPre-renderingを推奨としています!

Static Generationは、ビルドのタイミングで生成されるので一度アクセスしたユーザーにはアクセス時のキャッシュが常に渡されるシステムになっています!

ですので、度々更新があるページには向いておらず、LPのように更新頻度が少ないページに使用するのが適任だと思います。

Server-Side Rendering

Server-Side Renderingは、ユーザーのアクセス時にHTMLファイルが生成されます!

Server-Side Renderingは、ユーザーからのページリクエストのタイミングでNext.jsと接続し、ページを生成します!

ですので、Server-Side Renderingは更新の頻度が高いSNSなどのページに使用しても情報をリアルタイムでやり取りすることができます!

まとめ

いかがでしたか?

今回の内容はNext.jsのPre-renderingについて解説させて頂きました。

Next.jsを使用するのであればPre-renderingの知識は必須となりますので是非覚えておいて下さい!