SPA, SSR, 静的サイトジェネレーターについて

ReactやVue.jsを勉強しようとすると出てくる話がSPA/SSR/静的サイトジェネレータです。これに関して説明していきます。

SPAとは

SPAはSingle Page Applicationです。1ページをJS(JavaScript)で色々書き換え、複数ページ表示しているかのように感じるWEBアプリです。

ReactやVue.jsはSPAでサイトを構築します。

メリット

• サーバーサイドでレンダリングしてないので処理が高速。
• 画面遷移が発生しないのでもたつかない。
• 画面遷移が発生しないのでアニメーションをしっかり作り込める
• 画面遷移が発生しないのであたいの保持をローカルでずっとできる。

デメリット

• レンダリングされるタイミングがブラウザで訪れてきたあとなので初めはタグしかない状態なのでスクレイピングするとコンテンツなし状態で認識される。-> SEOに弱い

SSRとは

SSRはServer Side Renderingです。サーバーサイドでレンダリング(HTMLを作る作業)をしているということなので今までPHPやRubyやNode.jsがやってきたものと思えばいいです。サーバーサイド側でReactを表示した画面を出力するというものです。

ReactやVue.jsではSPAにおけるデメリットのSEOに弱いという対策として使われます。ReactではNext.jsというフレームワークが人気です。Vue.jsではNuxt.jsというフレームワークが人気です。

メリット

• サーバーサイドでレンダリングするのでブラウザから訪れた時にしっかりとしたコンテンツが表示される。 -> SEOに強い。
• キャッシュを持たせることができるのでキャッシュがあるときは静的サイトと変わらない速度で表示可能。

デメリット

• サーバーを建てなきゃいけないのでホスティングだけの環境におけない。
• サーバーに負荷がかかる（WordPressとか他のものと比べると負荷は少ないはず…。）

静的サイトジェネレーター

静的サイトジェネレーターとは、ReactやVue.jsで構築したサイトをレンダリング(コンテンツが表示されている状態)のサイトをアウトプットし、それをホスティングする。

わかりやすくWordPressで説明するとReactやVue.jsでWordPressを使うときは通常ブラウザに訪れてからデータを取りに行くように構築します。それだと接続でAPIの結果を待つためのもたつきが発生します。しかし、静的サイトジェネレーターはビルド(ジェネレート)するときにデータを取ってきて静的サイトになるのでユーザーがブラウザに訪れた時にはすでにコンテンツが存在している状態になります。

Reactでは静的サイトジェネレーターで有名なのはGatsbyです。しかし実はNext.jsも静的サイトにビルドすることができます。なのでSSRと静的サイトジェネレーターで迷ったときはNext.jsはいい選択肢かもしれません。

Vue.jsは静的サイトジェネレーターで人気なのはVuePressです。しかし、Vue.jsも同じくNuxt.jsでSSRも静的サイトも作ることができます。悩んだらNuxt.jsでいいと思います。

メリット

• サーバー側の環境がいらない。ホスティングだけでいい。(API使うならAPIのサーバーはいる。)
• 一番高速?
• 必要なところのみ動的にデータ取得できる。

デメリット

• コンテンツが書き換わったタイミングやサイトの編集が入ったタイミングで自動ビルド・デプロイする環境を整えないと手作業では大変すぎる。
• サイトがでかくなるとビルド(ジェネレート)に時間がかかるため、コンテンツやサイトを更新した時に「実際のサイトとしての表示」に時間のズレが生じる。

まとめ

どれも一長一短はありますね。この辺の話はなかなか記事を見ても理解しづらい所となるので一人で勉強するのは本当に苦労しました。「一人で勉強している辛い人」に対して一人でも多く貢献できればと思います。