SPA
A single-page application (SPA) is a website that re-renders its content in response to navigation actions (e.g. clicking a link) without making a request to the server to fetch new HTML.
How Single-Page Applications Work – Paul Sherman – Medium
ページをリロードしない。かわりにJavaScriptでDOMを操作して画面をレンダリングする。データはAjaxで取得する
https://en.wikipedia.org/wiki/Single-page_application
なぜSPA？
SPA以前（～2013ごろ？）
静的なHTMLがページごとに配信されていた
RailsとかPHPのテンプレートエンジンとかでつくるとこうなる
ネイティブアプリっぽい挙動をさせることができる
画面遷移が早い
via https://speakerdeck.com/mizchi/hurontoendoling-yu-wozai-ding-yi-suru?slide=32
昔はこうだった（サーバーサイドでHTMLを生成してはく。テンプレートエンジンとかつかう）
https://gyazo.com/5306f922e990d9712a8063e76ce2df75
SPA登場（React登場は2013年）
https://gyazo.com/5c0c86355fb4acf377984fdffef111c7
https://gyazo.com/dd4a160f16a7f185dd18a48fb5b159cd
おしすすめるとBlitzへ
課題
読み込まれるJSのサイズが大きいのでFCPやTTIが悪化する
OGPの設定がややこしい https://techlife.cookpad.com/entry/2022/06/21/130736 p.16
SPAのSEO
React（SPA）で動的にOGを変化させる
SSRでこれは解決できる