SSR とか SSG って何?
TL;DR
SPA のパフォーマンスや
SEO を改善するためのもの
もうちょっと詳しい説明
SPAの問題点
SPA
(Single Page Application)
を運用する際に発生する問題点
SEO
(Search Engine Optimization)
の問題
js を実行しないとコンテンツが見れないため、
crawler がサイトの内容にアクセスできない。
Performance の問題
SPA の場合、HTML 取得後に js の実行まで
コンテンツが表示されない時間がある。
SSR
(Server Side Rendering)
サーバ側で表示するコンテンツの HTML を生成し返す。
Node.js をサーバ側で動かすことで、Browser と同じ js を実行可能になった。
しかし、アクセスごとに HTML を生成すると
サーバ側の負荷が高くなってしまう。
そのためキャッシュの管理が必要になるが、キャッシュの破棄のタイミング管理などの煩雑な処理が増える。
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 がリリース
Made with Slides.com