もうちょっと詳しい説明

SPAの問題点

SPA(Single Page Application)を運用する際に発生する問題点

• SEO(Search Engine Optimization) の問題
  • js を実行しないとコンテンツが見れないため、
    crawler がサイトの内容にアクセスできない。
• Performance の問題
  • SPA の場合、HTML 取得後に js の実行まで
    コンテンツが表示されない時間がある。

SSR(Server Side Rendering)

• サーバ側で表示するコンテンツの HTML を生成し返す。
• Node.js をサーバ側で動かすことで、Browser と同じ js を実行可能になった。

SSG(Static Site Generation)

• SSR の HTML 生成処理を、サイトの build 時に行ってしまうのが、SSG。
• 動的な更新が不要なコンテンツ（ブログやリリースノートのような）であれば、静的な HTML を配信するだけになるので理論的に最速になる。
• SSR を使わないことで、サーバ側に Node.js が不要になる。

Next.js や Nuxt.js の役割

• React や Vue.js を使う際の Best Practice をまとめてくれている。
• SSR や SSG を一から設定するのはとても大変。
  他にも webpack の設定だけでも凄く大変。
  さらには依存しているライブラリの更新や設定の更新などもやってくれる。

モダンな frontend の歴史

SPA(Single Page Application)

• SPA 向け framework の出現
  • 2012/06 に AngularJS がリリース
    • 2016/09 に Angular がリリース
  • 2013/05 に React がリリース
  • 2014/02 に Vue.js がリリース

SSR(Server Side Rendering)

• SSR の対応時期
  • 2014/04 の React v0.12 で使いやすくなった
    • 2016/10 に Next.js v1 がリリース
  • 2017/04 の Vue.js v2.3 で使えるようになった
    • 2018/01 に Nuxt.js v1 がリリース

SSG (Static Side Generation)

• SSG の対応時期
  • Gatsby.js は 2017/07 にリリース
  • Nuxt.js は 2018/01 の v1 から対応していた
  • Next.js は 2020/03 の v9.3 で対応
    • 2020/05 の v9.4 でさらに先進的な
      ISG(Incremental Static Generation) に対応

おまけ：TypeScript

• 2012/10 に TypeScript が公開された
• 2014/04 に v1 がリリース