SPA, CSR, SSR, SSGを理解する
araby従来
従来のWebサイトはMPA（Multiple Page Application）が主である。
①WebサーバーにHTTPリクエストを送信
②WebサーバーがWebページを構築
③HTML/CSS/JSを返す
ページ遷移で常に読み込みが発生するのは、
リクエストごとにこのHTML、CSS、JavaScriptを組み上げる処理が行われるため。
arabySPA
Single Page Application
SPAの開発にReactが使用される。
返却されるHTMLファイルが一つなので、そう呼ばれる。
SPAは毎回HTMLを返すのではなく、差分を更新していく。
①WebサーバーにHTTPリクエストを送信
②HTML/CSS/JSを返す
③2回目以降のリクエストでは、Ajaxで差分情報のリクエストをサーバーに送る
※Ajax = Asynchronous JavaScript + XML
④サーバーからのレスポンスは JSON 形式のデータがレスポンスされる
⑤ブラウザは返ってきた差分箇所のJSONデータを、JavaScriptでHTMLに追加して表示する
APIとAjaxの関係性
API は 厳密には Ajax でのリクエストに JSON データをレスポンスするためのサーバーサイドのプログラムです。
arabyCSR
SPAとほぼ同義。
最初のビルドで、最小限の空のHTML、CSS、JavaScriptファイルを生成する。
ここからSPAの流れと一緒で、
ブラウザはWebサーバーにHTTPリクエストを行い、上記のHTML・CSS・JSファイルを返される。
ページがブラウザによってロードされると、
そのJavaScriptコードが実行され、ページを完全にインタラクティブにする。
(このプロセスをhydrationという）
クライアント（ブラウザ）によって、JSで描画を行うことから、
クライアントサイドレンダリングと呼ばれる。
一番最初はクライアント側で描画を行うので、ロードに時間がかかる。
クライアント側でレンダリングされる＝クローラーからは何も見えないので、SEOに不利と言われる。
arabySSR
Server Side Rendering
Next.jsで使える。
SPAとMPAの間みたいな感じ。
サーバー側でプリレンダリングを行い、HTML ・CSS・JS を返す。
クライアント側でJavaScript が実行されてレンダリングされサイトがインタラクティブになる。（Hydration）
サーバー側でプリレンダリングされる分、初期描画速度が速い。
SSGと違い、リクエスト時にサーバー側でレンダリングする。
リクエストごとにページを生成する。そのため、サーバーに負荷がかかる。
大量のアクセスが来た場合などに、サーバー側の負荷が高くなってしまう。
arabySSG
Static Site Generator
アプリをビルドするたびに、全てのページが作成される。
リクエストがあったら、サーバーはそれを返すだけで済む。
頻繁に変更されないコンテンツを持つ Web サイトに適している。
arabyメリデメをまとめている記事