導入
Next.jsは高速で画面表示を行えることから、モダンなHPなどでよく使われます。
最近では、デジタル庁のHPがNext.jsで作られていることが話題になりました。
実際にかなりページ遷移がかなり早く、快適に見ることができます。
業務でNext.jsを使用したことがあるのですが、
今回自作でHPを作成することにしたので
振り返りを込めて、まとめていきます。
Next.jsのメリット
Next.jsとはreactのフレームワークです。
主なメリットは以下の4つです。
・クライアントのPCに依存せずにレンダリングができる
・直感的なルーティング設定ができる
・ページ読み込み速度が向上する
・SEO対策になる
今回はその中でも、ページ読み込み速度が向上するについて解説します。
プリレンダリングで読み込み速度が向上する
Next.jsを使用すると、なぜ読み込み速度が向上するのか。
それは、プリレンダリングを行うからです。
プリレンダリンとは、クライアントサイドで逐一レンダリングするのではなく事前にHTMLだけ作成しておく手法のことです。
HTMLを作成する時間を削減できるため、高速なページ遷移が可能となります。
プリレンダリングの手法は、
SSGとSSRの二つがあります。
SSGとは
SSGはStatic Generation(静的生成)の略です。
ビルド時にレンダリングを行い、HTMLをクライアントに渡します。
HTMLを作成する時間が短縮されるため、高速なページ遷移が可能となります。
デメリットは、
・ビルド後に更新された情報を反映できないことです。
SSRとは
SSRは、Server Side Renderingの略です。
SSGとは異なり、クライアントのリクエストの度にサーバーサイドでレンダリングを行います。
リアルタイムにデータを反映できることが特徴です。
デメリットは、
・SSGよりもページ表示速度が落ちることです。
SSGとSSRは併用できる
SSGとSSRは、ページ毎にどちらを使うかを決めることができます。
例えば、基本はSSGで高速表示を行い、
ユーザープロフィールや、SNS連携部分のみSSRで行うなど、出し分けを行うことができます。
まとめ
以上、今回h Next.jsについてまとめました。
ブログやHPなど、高速でページ遷移ができるため、ユーザビリティの高いサイトを作ることができます。
次回以降は、実装方法などまとめたいと思います。