サーバサイドレンダリング (SSR) とは何か?
Vue SSR ガイド | Vue.js サーバサイドレンダリングガイド
通常では、Vue コンポーネントはブラウザで DOM を生成し操作がされます。しかし、同じ Vue コンポーネントをサーバ上の HTML 文字列に描画し、ブラウザに直接送信し、最終的に静的なマークアップとしてクライアント上の完全なインタラクティブアプリケーションに "ハイドレート (hydrate)" することもできます。
Nuxt.jsを使って実際に比較する
Nuxt.js - Universal Vue.js Applications
Nuxt.jsにはSPAモード(サーバレンダリングなし)とUniversalモード(サーバレンダリングあり)が用意されている。これを使って実際にブラウザにどのようなデータが渡されるのか比較してみる。
環境構築
下のコマンドを入力してポチポチ選択していくだけで構築完了する。
$ npx create-nuxt-app <project-name>
開発サーバを立ち上げる
$ yarn dev
ブラウザで http://localhost:3000
にアクセスし下のような初期ページが表示されれば環境構築完了。
Single Page Application
まずSPAモードで起動*1 ブラウザからソースファイルを表示する。
// ブラウザから表示したソースファイル <!doctype html> ... 中略 <body data-n-head=""> <div id="__nuxt"><style>...</style><script>...</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div> ... 後略
id="__nuxt"
内は、クライアント側でjsを実行しレンダリングするため、実際に表示される要素はソースに含まれていない。
Universal
次にUniversalモード
// ブラウザから表示したソースファイル <!doctype html> ... 中略 <body data-n-head=""> <div data-server-rendered="true" id="__nuxt"><div class="nuxt-progress" style="width:0%;height:2px;background-color:#FFFFFF;opacity:0;"></div><div id="__layout"><div><section class="container"><div><div class="VueToNuxtLogo"><div class="Triangle Triangle--two"></div> <div class="Triangle Triangle--one"></div> <div class="Triangle Triangle--three"></div> <div class="Triangle Triangle--four"></div></div> <h1 class="title"> nuxt-universal </h1> <h2 class="subtitle"> My spectacular Nuxt.js project </h2> <div class="links"><a href="https://nuxtjs.org/" target="_blank" class="button--green">Documentation</a> <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a></div></div></section></div></div></div> ... 後略 ...
id="__nuxt"
内に、既に実際に表示される要素が構築されている。これがサーバレンダリングありとなしの違いになっている。
まとめ
- SSRにすることで、検索エンジンのクローラが完全に描画されたページを直接解析するため、SEOが向上する。
- SSRにすることでユーザ体験が向上する。SPAと異なりサーバサイドでマークアップが作られるため、スペックの低いデバイスを使うユーザやネット速度の遅い環境などの場合、ユーザにより速くコンテンツを届けられる。
- 当然かもしれないがサーバを介する際のみサーバサイドでレンダリングされるので、Nuxt内ルーティングで画面遷移した場合などは、クライアント側でレンダリングを行うことになる。
- SSRには、Node.jsサーバが必要だったり、サーバサイドの負荷が増える、などといったトレードオフもある。
*1:モードの変更は、nuxt.config.js のmodeプロパティで変更が可能。https://nuxtjs.org/api/configuration-mode/