SPA

SPAとは「Single Page Application」の略
単一のページでコンテンツの切り替えを行うWeb アプリケーションのアーキテクチャ。
最初に、単一のページを読み込み、後はAPIで状態を取得してJSで差分を置き換える感じ

従来

Client ——— Server
基本サーバーへのHttpRequestで、差分が生じたら全ページ書き直し
→　ページを更新したい時には、毎回http通信してHTMLを返すので、１からレンダリングする読み込みに時間がかかる….

現在

Client ——- Server
初回のみHttpRequest
２回目以降は、AjaxによるAPI通信で、JSを利用した差分更新
→　２回目以降は読み込みは差分更新なので速い！

メリット

• UXの向上　→　２回め以降のページの切り替えの速さ
• フロントとバックエンドの疎結合化

デメリット

• 初回読み込みは、JSのモジュール等を沢山読み込むため少し時間がかかる
• 静的ページが多いサイトには不向き
• SEOに弱い　
  →　通常SPAは、クライアント側で画面を生成するため、プレーンなHTMLを返す。
  　　そのため、Webクローラからは、あたかもプレーンなページのように見える。

クローラとは…

Googleなどのロボット型検索エンジンがWEB上のファイルを収集するプログラムです。

robots.txt
よく見るrobots.txtとは検索エンジンのクローラー（ロボット）のWEBページのへのアクセスを制限するためのファイルで、ロボットに向けた命令文（アクセスを許可/許可しない）を記述するらしい。

SSR

SSRは、「Server Side Rendering」の略。 JavaScriptが実行されないときや初回ロードのときは、サーバサイドでそのコンテンツをレンダリングするというアプローチで、 SPAのSEO対策としてよく使われる。

問題点

• Server側とClient側で同じページを返す仕組みをとるため、重複したロジックが生まれる….
  → Universal JSの概念の発生(ServerもRailsとかより、Nodeで作ってコードを共有しよう!)

Universal JSのフレームワーク

• Meteor
• Next.js