Nuxt.jsのレンダリングの用語について

LiSMOtechの小谷です。前回に引き続きNuxt.jsについて書いていきます。

Nuxt.jsの特徴としてSSR(サーバーサイドレンダリング)ができるということがありますが、なかなか言葉的に難しかったり、実感しづらかったりするのでなかなか理解が難しいですね。。。

そこで、今回は自分なりにSSR (サーバーサイドレンダリング)、SSG(スタテックサイドジェネレーション)、SPA(シングルページアプリケーション)などについてまとめてみようと思います。

Nuxt.js初心者なので、一部内容に間違いがあるかもしれませんので、ご愛嬌下さい。

また、ここでいうレンダリングはブラウザのレンダリングではなく、HTMLを生成することになっています。個人的には、この”レンダリング”という言葉が今回紹介するSSR、SPAなどの理解を妨げている気もしています。

SSR (サーバーサイドレンダリング)とは？

SSRとは、サーバーサイドでレンダリングを行うことです。

Nuxt.jsで使用する場合はnuxt.config.jsでssr:trueで設定した時になるそうです。

サーバーサイドでレンダリングしてくれると何が良いかというと、SPAと比べて初期表示が早いことなどがあると思います。サーバーサイドでレンダリングを済ませてあると、返却されたHTMLをブラウザに表示させてあげるだけですので、表示が早いということになるそうです。

ですが、デメリットもあります。サーバーの方でNode.jsの実行環境がない場合はSSRは出来ません。どのサービスでデプロイするとSSRできるかはNuxt.jsの公式のデプロイのページが参考になりそうですね。

SSG(スタテックサイドジェネレーション)とは？

SSGとは、静的ファイルを生成することです。

名前のある”ジェネレーション”というのは、サイトによってはジェネレーターだったり、ジェネレーションだったりするので、正式にどちらかはわからないですが。

あらかじめHTMLなどを用意しておいて、それをリクエストがあった時に返却する感じです。あらかじめビルドしておいたHTMLなどを返却することもSSGと言ってよいみたいです。

Nuxt.jsで使用する場合はnuxt.config.jsのtatget: ‘static’とするとデプロイターゲットが静的に設定できるようです。

メリットとしては、SSGはあらかじめファイルを用意していることもありパフォーマンスが良かったり、デプロイ先の環境でNode.jsを用意しなくてよいことです。

SPA(シングルページアプリケーション)とは？

SPAとは、名前にある通りでシングル(一枚のページ)でつくるアプリケーションです。

Vue.jsやReact.jsで作られたアプリケーションがこれにあたり、これらを触ったことがある人は想像つきやすいと思います。

一つのHTMLに作成した画面や部品などをどんどん追加していくイメージになります。これを聞くとページが出来ないのでは？と思いますが、Java Scriptで擬似的に画面遷移しているように見せることも可能です。

SSRと比べると、未完のままのHTMLなどを返され、ブラウザで表示される前段階でデータなどをとってきてそれを元に追加でDOMを生成するなどをしてSPAの場合はブラウザできちんと表示されるまでに時間がかかります。

Nuxt.jsで使用する場合はnuxt.config.jsでssr:falseで設定した時になるそうです。ssrの反対なので、SPAではなくCSR(クライアントサイドレンダリング)といった方がしっくりくるかもしれませんね。

SSGとも少し似たような感じがしますが、SPAはシングル(一枚のページ)で作られたアプリケーションを指し、SSGは静的なファイルを作成することや返すことという感じがします。

メリットとしては、サーバーの方でNode.js実行環境があるかなど気にしなくていいので、デプロイが比較的簡単であることと初期表示以外はスムーズな画面表示ができることだと思います。

デメリットとしては、上記に書いたようにやはり初期表示が遅いことがあげられます。

おまけ

このSSRやSPA関連で気になることとして、コンパイル時ターミナルに出る以下のような表示が気になりますね。前回の環境構築をしてからターミナルの方に出ていると思います。

✔ Client
Compiled successfully in 1.32s

✔ Server
Compiled successfully in 1.18s

No issues found.

これはデフォルトでNuxt.jsがサーバーでもクライアントでもレンダリングされるようになっていて、クライアントとサーバーの両方でコンパイルが走るみたいですね。

この設定はnuxt.config.jsでされており、

export default { ssr: false }

として、保存するとサーバーサイドのコンパイルは速攻で終わり、クライアントサイドのコンパイルだけ走っている感じでした。

ブラウザで開発者ツールを開いてみるとNuxt SSRの表示が消えています。

試しに先ほど変更したssrをtrueに戻して比較してみます。

Nuxt.jsのライフサイクルでSSRのときにしか実行されないnuxtServerInit (ストア関連のイベント)というものがあるので、このイベントで適当にコンソールログで出してみると分かりやすいかもしれません。

store/index.jsに

export const actions = {
  nuxtServerInit() {
    console.log('nuxtServerInit is called.')
  },
}

を書き加えてコンソールログを比較するとこんな感じでした。

※別記事で少し画面をいじってストアを試したので、こちらも参考にして下さい。

ssrをtrueにしたときにしかコンソールで’nuxtServerInit is called.’が出ないこと確認できますね。

ローカルで開発中はSSRをfalseにして、クライアントのコンパイルだけを走らせて時間短縮とかしたりとかありなのかな？と思いました。が、どうなんでしょ？？

まとめ

Nuxt.jsのレンダリング周りの用語をみていきましたが、なかなかまだまだ難しいですね。。。nuxt.config.jsの設定でssrとtargetとあり、これの組み合わせなども考えるとまた難しくなってくるのかもしれませんね。

レンダリングのモードについては実際の用途やデプロイする環境などを考慮して決めるのが良さそうですね。