ども、カロージです。

SPA（Riot.js / Angular.js ）以降、フロントエンドから遠ざかっていたのですが、

これじゃイカン。。との事で、先日（去年11月）、Front-End Study #1「Cloud Native時代のフロントエンド」というセッションに参加させて頂きました。

どちらかと言うと、Cloud Native 的なお話に興味があり訪問させて頂いたのですが、

セッション内フロントエンド関連のお話の際、よー分からん略語が沢山登場していました。

色々な用語があるのですが、変遷と意味、あとは最近のフロントエンド動向について以下にまとめてみました。

略語

• SPA
• CSR
• SSR
• SSG
• ISR
• JamStack

変遷

• 2006年～
  • jQueryの時代
    • メリット
      • 使い方が簡単で、皆が知ってる。
      • プラグインが豊富にある。
      • よって、ネット上に情報が沢山ある。
    • デメリット
      • ネイティブに比べ遅い。
      • アニメーション関連の処理は、現状も、jQuery一択の状態
      • バージョンによってはセキュリティホールが指摘されている

• • 注釈
    • この時代は、サーバーでのレンダリングとクライアントサイドでのレンダリングの組み合わせが多かった気がする

•  2009年～
  • SPA（Single Page Applicationの略）
    • メリット
      • ユーザーのページ遷移のストレスがない
      • HTMLのコーディング作業量が減る
      • （ページ遷移毎にサーバーへリクエストしない為）ページ遷移が高速
    • デメリット
      • 初期ページの読み込みに時間がかかる
      • SEO的な問題が指定されてた。
    • 主なライブラリ
      • React
      • Angular.js
      • Veu.js
      • Riot.js

• 2011年～
  • SSR（Server Side Rendering の略）
    •  メリット
      • レンダリング後のファイルを返却するためコンテンツ表示までの時間を短縮できる
      • サーバーサイドでレンダリングする為、SEOな問題がない
      • 動的なOGP対応が可能
    • デメリット
      • キャッシュ設定が複雑になりがち
      • SSRするためのWebサーバーが必要
      • CGI実行するとサーバー負荷がHTMLの約10倍以上になる
    • 主なライブラリ
  • 注釈
    • サーバーサイドレンダリングという言葉自体は、創世記の時代からある。が、
    • ここで使用される「サーバーサイドレンダリング」は創世記のものとは異なりJSP、ASP、PHPなど、サーバーサイドのWEB言語でバッファすることではない。
    • 使用される意味としては、SPAの弱点を補うため、初期表示の1度のみサーバーサイドでレンダリングし
    • その後、SPAの様にフロントエンドでの画面遷移することを意味します。

• • CSR（Client Side Rendering の略）
    • メリット
      • ページ遷移が非常に高速
      • 構成がシンプル
      • （一般的な）ホスティングサーバーが不要
    • デメリット
      • 初期ローディングにやたら時間がかかる
      • SPAと同様に、SEO的な問題が指定されてた
      • 動的なOGP対応ができない
    • 主なライブラリ
      • SPAと同様

• 2019年～
  • SSG（Static Site Generator の略）
    • メリット
      • ビルド時に静的なファイルを生成する。
      • 静的なファイルへのアクセスなので高速
    • デメリット
      • ビルド時に静的なページを生成する
      • ページ数が多いとビルドに時間がかかる
      • 例えば、ブログに1万ページの記事があったら、ビルド時に1万ページの静的ファイルを生成する
      • ページ生成がビルド時のみなので、ページ更新は、再ビルドし直す必要がある
    • 主なライブラリ
      • Nuxt.js
      • Next.js
      • React Static (リアクト スタティック)

• 2020年～
  •  ISR（Incremental Static Regeneration の略）
    • メリット
      • 段階的な静的サイト生成のように訳されているが、感覚的には、アクセス時に静的ファイルを生成している。
      • そのため、アクセス時に初めて生成されるので初回ビルドが高速
      • ISR でページ生成後も再度アクセスがあった際に次回以降の内容をビルドするので内容が更新される
      • SSG の様に事前に全ページを生成するのではなく 1 度アクセスされたページがキャッシュの様に生成され、次回以降その内容がレスポンスされる。
    • デメリット
    • 主なライブラリ
      • Next.js

• その他
  •  JamStack
    • JavaScript / API / Markup で構築されているサイトの事を指すらしい。
      • 昔のLAMPみたいな略語？（さしずめ LAMP Stack ？ ）
    • 但し、SSRが前提らしい。
    • Webサーバーに依存しない。と言う特徴があり、極論だが、デスクトップで動作する。

動向

勝手な動向予測だと、今後は、「サーバレス環境 + JamStack」な感じになると思われます。

良く、フロントエンジニアさんや、デザイナーさん程、クラウドを利用するべきだ。とか言われますが、

正に言葉の通りの時代が到来すると思います。

でわ

参考

• https://qiita.com/akashixi/items/84cd79e090a283bb8c67
• https://qiita.com/h_tyokinuhata/items/6e30e24447a505dbd4d9
• https://qiita.com/umamichi/items/9bd08a21fddc71588efc