【フロントエンド】レンダリング方法が複雑！SSRや SSGについて

新しくNext.jsを学び始めたところ、さまざまなレンダリング方法があったことがわかりました！

ただ静的な情報を表示（レンダー）したり、apiから引っ張ってきた情報をレンダーするなど、その状況によって最適なレンダリング方法があるのです！

今回は3つ（SSG, SSR）のレンダリング方法について紹介していきますよ(^^)

それでは、よろしくお願いします！！

本題の前に。。。（Pre Rendering）

２種類のレンダリング方法について紹介する前に、共通して把握しておくべきことがあります。

それが、Pre Renderingです。

Pre Renderingとは直訳の通り、事前にレンダリングをしておくことです。（事前にNextjsがHTMLをローディングしていること）

ユーザーがページにアクセスした時、事前にロードされたHTMLを動的にすることで完全なページが生成されます。（Hydration）

このPre Rendering。大きく２つに分けるのですが、それがSSGとSSRなんですね！

一つ目がSSG。Static Site Generationの頭文字をとって命名されています。

直訳の通り”静的にサイトを生成をする”ということなのですが、もう少し詳しくいうと。

Next.jsが起動された段階でHTMLの静的ページが生成されるということです。

起動した段階でレンダーが開始されいつでも表示できるようにスタンバイしているので、複数回同じページを表示するときに挙動が早いといったメリットがありますね(^^)

最初だけ頑張ればOK！みたいなレンダリング方法ですね！

次のレンダリング方法が、SSR。Server Side Renderingの略で、直訳でサーバー側でレンダリングをしていることになりますね！

シングルページアプリケーション（SPA）と組み合わせて使われています！

SPAにて初回レンダリング時にはベースのHTMLがレンダーされていますが、画面遷移が起こるたびにサーバーのレスポンスが反映されるというものになります。

データが高頻度で更新され、それをすぐ表示させたい場合はSSRが有効ですね！

Next.jsは複数のレンダリング方法を組み合わせてアプリを作れるので、SEOに強い。かつ高レスポンスな設計ができるといった良いとこ取りな技術なんです！

実装したい機能の性質によって最適なレンダリング方法を選択できるようになっていたいですね(^^)