SPA（Single Page Application）

• 返却されるHTMLファイルが単一なのでSingle Page
• 初回リクエスト時に最小限のHTMLをブラウザに返却
• 新たに取得したいデータが存在すればその差分を都度APIからデータを取得してDOMを構築しHTML要素がレンダリングされる
  • APIからはJSON形式でデータを取得
    
• メリット
  • ページ毎にリクエストを送らない為、ページ遷移が高速（ローディングがほぼ無い）
  • ユーザーに優れたUXの提供が可能
• デメリット
  • 初回ローディング時に時間がかかる
  • SEO問題
    • SPAの各ページにアクセスした際に、レスポンスとして帰ってくるHTMLは常にindex.htmlであり、アクセスしたページによって差がない
    • SPAでは、ページ遷移が発生してもURLが変わらない
    • SPAでは、コンテンツの生成とページの更新がクライアントサイドのJavaScriptによって動的に行われるため、index.htmlだけをみてもほとんど内容が無い

SSR（Server Side Rendering）

• サーバー側でレンダリングするのでServer Side Rendering
• SSRはページ遷移のたびサーバーにHTTPリクエストが走り、サーバー側でAPIと連携され生成されたHTMLをブラウザに返すアーキテクチャー
• SPAのデメリットを解消
  • 初回ローディング時に時間がかかる
    • SPA：クライアントでレンダリングするので、処理するJavaScriptの量が膨大
    • SSR：レンダリングをサーバーサイドで行うので、そこまでスペックの高くないPC（クライアント）でも安定した表示速度を保つことが可能
  • SEO問題
    • SSR：サーバーサイドでHTMLを作成し、クライアントに返却するのでGoogleクローラーが正しくページを認識できる

SSG（Static Site Generation）

• ビルド時にサーバー側でAPIからのデータ取得とHTMLの生成する
• クライアント側からリクエストのたびに事前に生成しておいたHTMLを渡す
• CDNにHTMLファイルのキャッシュを配置しておき、各ユーザーから近いCDNからそのキャッシュを返す方法が有効