Zenn
📘

SSRとは？SPAってなに？

2023/06/14に公開
Nuxt
Vue.js
#
SPA
#
SSR
tech

Nuxt.js（や Vue.js）の勉強をすると、SSRやSPAなどの壁に毎度ぶち当たるので、調べてみてみたものをまとめながら整理したいと思います。

Vue.js は「クライアントサイドで動くSPAフレームワーク」

Vue.jsは、

  • 「クライアントサイドアプリケーションを構築するためのフレームワーク」（公式より引用）
  • デフォルトでSPA
  • 通常では（SSRではないSPAの場合）、Vueコンポーネントはブラウザ（クライアント側）でDOMをレンダリングする

そもそも Vue.js は「クライアントサイドで動くSPAフレームワーク」である。

DOM…

ウェブページの描画はサーバー上でも可能

しかし一方で、Vueコンポーネントは、

サーバ上のHTML文字列に描画  
↓　　
ブラウザに送信　　
↓　　
静的なマークアップとしてクライアント上にhydrate（ハイドレート）

することも可能。

サーバー上で描画されたVue.jsアプリケーションはコードの大部分がサーバとクライアント両方で実行されるから、"isomorphic（アイソモルフィック）"や"universal"と見なせる。

SSR と 非SSR

非SSR

  • バンドルされたJSがブラウザに渡り、ブラウザからAPIを叩いてデータを取得したり、ブラウザでHTMLをレンダリングしたりする。

SSR

  • サーバーサイドでもクライアント側と同じようにJSを動作させて、APIを叩いてデータを取得したり、HTMLをレンダリングして、それをブラウザに送信する。
  • SSRにおけるクライアント側は、クライアント側でも同じ処理をしながら、サーバーから送られてきたHTMLと自身が生成したHTMLを比べて"ハイドレート (hydrate)" する。

Vue.js はどうやってハイドレートするのか？

サーバーサイドでレンダリングされた要素は、

<div data-server-rendered="true" id="__nuxt">

と、data-server-rendered 属性の目印を付けられて送られる。こうすることで、クライアントサイドのVueに、サーバー上で描画されたことを知らせる。この要素はハイドレーションモードでマウントされる。

モードでの違い

開発モード

  • クライアントサイドで生成された仮想DOMが、サーバで描画されたDOMの構成と一致しているか検証を行う。
  • 一致していない場合、ハイドレーションを取りやめ、スクラッチから描画を行う。

プロダクションモード

  • パフォーマンス最大化のために、このアサーションは無効にされる。
  • （ハイドレーションを取りやめず、仮想DOMとの不一致部分の変更になるということ・・？）

なぜサーバーサイドレンダリング（SSR）なのか？ SSRのメリット

  • 検索エンジンのクローラが、完全に描画されたページを直接解析するため、SEOが向上する（と言われている。らしい。）
  • インターネットやデバイス環境に依存しないため、ユーザは完全に描画されたページをすぐに見ることができる。

SSRで考慮すべきこともある。SSRの代表的なデメリット

  • 毎度全てのHTML/CSS/JSを読み込むからサーバーに負荷がかかるのが大きなデメリット

そこで、SPA。2回目以降の訪問時は、必要な差分のみアクセスするSPAは、SSRとの相性が良いとされている。

SPAって？

  • 「単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイト」（wikiより）
  • サーバーから読み込むのは、ファーストインタラクションの一度だけ。
  • 2回目以降は、全ファイルを読み込むわけではなく、差分の更新に必要な分だけ、サーバーに読み込みにいく。
  • ページ遷移時は、クライアントサイドのJSでページが書き換えられる。

SPAのデメリット

  • SEOの面で不利
    • クライアントサイドのJSでデータを取得しHTMLを構築するというステップでページを表示することから、ほとんどの場合クローリングの対象外。
    • よって、になるため、サーバーサイドレンダリング(SSR)などで対策する必要がある。
    • SSRを導入するためにはサーバーサイドの開発も必要となる。
  • 初回訪問時のローディング時間が長くなってしまう。よって、大規模サイトは特に不向き。
  • （Nuxt.js）SPAモードからUniversalモードへの切り替えは、全ページをSSR対応にする必要が出てくる為、SPAモードの決定は慎重に。

SPAは本来JSフレームワークを使わなくても作れる

その仕組みをフレームにし、簡単に作れるようにしたのが、SPAフレームワークです。

フレームワークの変遷

  • もともと Angular、React が主流だった。
    • React は、もともとアプリ（React Native）だった。React は、WEB拡張版。
  • そこに、Vue が登場。Vueは SSR に目をつけた。
  • Vueは、SSR の仕組みを投入し、さらにSPAの仕組みの操作を簡略化した Nuxt.js を作った。

SPA*SSRの仕組みがある Nuxt.js がいいってこと？

どうやらそうとも言えないよう。

  • Nuxt.js は、学習コストが低いけれど、Nuxtのバージョンや機能に依存する為、長期運用には向かないとされてる。
  • Nuxtに触れる人は多いわけでもない。
    • Pug/Stylusすらも使わずに、生HTMLを書くのもザラな世界。
    • Pugだったらコンパイル後のHTMLファイルを渡せばいいけどNuxtはそうもいかない。
  • 日本の企業の多くは、IEで見てる。そもそもSPAは向かない場合も多い。
  • 一方で、AngularやReactは、自分でSPAを設定したりしなくちゃいけないけど、自由度が高い分応用もしやすい。

Nuxtが最適なのか、そもそもSPAが最適なのかは、毎度考える必要がある。

参考にした

こっちも参考になりそう。

Discussion