【Vue.js】SSRやCSR、ライフサイクル周辺について解説してみる

フレームワーク

SSRとCSRって何

vue.jsの勉強をしている最中に出てきた用語です。Web系のエンジニアなら必ず聞いたことがある用語でしょう。自分はいまいち良くわかってないので調べてみることにしました。

SSR (sever side rendering)

SSR、サーバーサイドレンダリングの略です。サーバーサイドのレンダリング?ひとまず、レンダリングの意味としてはプログラムを用いて画像(画面)などを生成することを言います。つまりこのレンダリングの処理をサーバーサイドで行うという意味。もともとjavascriptsはブラウザで処理を行って、HTMLをレンダリングをするのが普通でした。ですが、この方法だとロード時間が長くなってしまうというデメリットがありました。このデメリットを解消するために生まれたのが、SSRという技術です。この他にもSSRはメリットがあります。

CSR (client side rendering)

CSR、クライアントサイドレンダリングの略です。こちらは先ほど説明したとおり、クライアントのブラウザで javascriptsの処理を行ってHTMLをレンダリングする方法です。

 

レンダリング

レンダリングとは

まずレンダリングと聞いた時になにを思い浮かべますか?僕はHTMLを画面の描写するまではイメージできました。あとDOMっていうものを構築してそれに沿って…?といったようなイメージ。もう少しレンダリングとは何かを掘り下げて説明できる状態まで持っていきましょう。

レンダリングの詳細

画面が現れるまでに複数の工程があります。

・Loading

・Scripting

・Rendering

・Painting

 

の順番で処理を行うことで画面がユーザーに表示されます。

Loadingの処理

ここでは「HTML」「CSS」「JavaScript」のソースファイルや画像ファイルをサーバーからダウンロードしてきます。その後HTMLファイルは「DOMツリー」、CSSファイルは「CSSOMツリー」というレンダリングエンジンが読み込める形式に変換します。ちなみにDOMというのはDocument Object Modelの省略形です。と言われても全くイメージできないと思うので簡単にイラストを書きました。

こんな感じでHTMLのコードをツリー状に仕上げたものをDOMといいます。こうすることでレンダリングエンジンが解析できるようになるんです。

Scriptingの処理

ここではブラウザがJavaScriptを解析します。解析した結果(コンパイルが終了)、JavaScriptが動くようになります。ボタンを押したときに画面が動的に動いたりするのもこのフェイズでJavaScriptsをコンパイルしているおかげなんですね。

Renderingの処理

ここではLoadingのフェイズで生成したCSSOMツリーを使用して、DOMツリーにCSSのプロパティを当てはめていきます。当てはめた後は要素の座標などの計算を行い、どこに要素を配置するかを決定します。

Paintingの処理

最後に要素を決定した座標の位置に描写していきます。描写するにあたって、1つの画面は複数のレイヤーと呼ばれる層を組み合わせて生成されます。

 

vue.jsのライフサイクル

公式サイトにvue.jsのライフサイクルのフローチャートが掲載されているのでこれを整理しつつ、解説していこうと思います。

ライフサイクルの全体図

公式サイトにライフサイクルのフローチャートが記載されていますので引用しておきます。

 

出典元:「Vue インスタンス」

Vue インスタンス — Vue.js
Vue.js - The Progressive JavaScript Framework

 

ではこの図を上から追って解説していきます。

beforeCreated

main.jsなんかで new Vueをすることでインスタンスが生成されます。この直後に実行されるのがこのbeforeCreatedです。

created

beforeCreated同様、インスタンスが生成され、インジェクションとリアクタビリティが初期化された時後に呼び出される関数です。インターンでメンターの方にここでサーバーサイドから値を取得する処理などを書くのが良いとのアドバイスをもらいました。beforeCreatedとは何が違うの?と疑問に思った方もいらっしゃると思います。違いはdata()の中で定義したプロパティが使えるかどうかです。createdではこのdataの中で定義したプロパティは参照することができます。

beforeMount

先ほどと同じコードですが、最後の$mount ('#app') に注目してください。インスタンスを生成した後HTMLファイル(index.htmlなど)にマウントします。この直前に呼ばれるのが beforeMountです。

mouted

インスタンスがマウントされた後に実行されます。インスタンスをマウントした後はDOM要素にアクセス可能となるため、thisをつかってdataのプロパティに値を代入できるようになります。

beforeUpdate

データの更新があった際に呼ばれる関数です。再レンダリングする前なので、更新前のDOMの要素にアクセス可能ができます。

updated

データの更新があり、再度レンダリングされた後に呼び出される関数です。

beforeDestroy

vm.$destroy()などによってインスタンスが削除される直前に呼ばれる関数です。

destory

こちらもvm.$destroy()インスタンスが削除された後に呼ばれる関数です。ちなみにインスタンスを意図的に削除をする場面ってあるんですかね?

 

Nuxt.jsについて

Nuxt.jsとは

冒頭でSSRの話を軽くしましたが、このSSRという技術をVue.jsで使用したい時いくつかのライブラリをインストールする必要があります。これらのライブラリがあらかじめセッティングされているのがNuxt.jsです。つまりVue.jsでSSRを使用したい時に使うフレームワークという認識でOKです。

 

Nuxt.jsのライフサイクル

Nuxt.jsを導入すると、Vue.jsのライフサイクルに加え、Nuxt.jsのライフサイクルも追加されます。といっても両者とも独立しているのでNuxt.jsのライフサイクル+Vue.jsのライフサイクル(一部skip)という感じです。

Nuxt.jsのライフサイクルの全体像

Nuxt.jsのライフサイクルはこのような流れです。ちなみにasyncDataor fetchのあとはVue.jsのライフサイクルに続きます。ここで注意するべきなのはbeforeCreated以降のライフサイクルはSSRを使用した時はスキップされます。なのでここに処理を書いても無視されてしまうことになるので注意が必要です。

nuxtServerInitの処理

Requestを受けた後、ここではセッションなどから取得したデータをStoreに保存する処理などを書きます。

middlewareの処理

一般的なやり方としては nuxt.config.js でrouterに読み込ませることでmiddlewareを実行します。この方法を実行すると画面遷移した際にmiddlewareの処理が実行されるようになります。middlewareという用語でなんの処理を噛ませるかいまいちピンと来ない人向けにサンプルコードを書いておきます。

ページを遷移する時に遷移するページによってことなる処理を噛ませたりするがmiddlewareで役割です。例えばログイン情報を持っていなかったりしたら、「そのページには遷移させないようにフラグをもつプロパティにfalseをstoreにセットする」などといったような処理などが挙げられます。

Validateの処理

ここではcomponentのパラメータをチェックして、条件を満たさなかった場合404を返すといったような処理を書きます。

asyncData or fetchの処理

axiosなどを使って、APIを使って取得し、そのデータなどをSSRでstoreに保存、セットする処理を書きます。

 

Nuxt.js + Vue.jsを勉強する

参考サイト

以下のサイトを参考にさせていただきました。どのサイトも非常にわかりやすく解説していますので一目通して置くことをオススメします。

 

The Vue Instance — Vue.js
Vue.js - The Progressive JavaScript Framework
Vue.jsのライフサイクルメモ - Qiita
この辺の話 ライフサイクルダイアグラム 今の所、createdとmountedぐらいしか使ったことがないが、 予め知っておくと他のライフサイクル...
Vueのライフサイクルを完全に理解した - Qiita
# Vueのライフサイクルについて 今回はVueのライフサイクルについて説明したいと思います。 Vueのライフサイクルは以下のようになっております
ブラウザレンダリングを理解するため簡単にまとめてみた - Qiita
初投稿です。よろしくお願いします(/・ω・)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 # こんな本を...
Nuxtで画面に横断的にMiddlewareを適用する #nuxtjs #vuejs - ジムには乗りたい
概要 Nuxtにはミドルウェアという機構がある。 ミドルウェアを使うと、ページがレンダリングされる前に、実行されるカスタム関数を定義できる。 複数のページでミドルウェアを実行するには3つ方法がある。 nuxt.config.js でrouterに読み込ませる layoutでミドルウェアを読み込む layoutを使用して...

絶対読むべき参考書

これらの参考書はvueを始めた人にぴったりの勉強本だと言われているので読んでみてもいいかもしれません。

 

今回の記事とは少し話題が逸れますが、ネットワークなんかの知識もしっかり抑えて置くのが、高収入エンジニアになる上で不可欠です。TCP/IPといわれて「?」ってなった初心者エンジニアの方は絶対読むべき本です。

 

タイトルとURLをコピーしました