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

javascript

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を使用して...

エンジニアにイチ押しアイテム

目の疲労回復グッズ

ディスプレイをずっと見続けた時の目の疲労感ってすごいですよね。血行が悪くなっているというかズーンて重い感じがして、ひどい時は気持ち悪くなったりした経験をもつ人も多いのではないのかと思います。目って今後生きて行く上で非常に大切なものですし、ちゃんとにケアしていきたいものです。そこで私が日常的に使っている目のマッサージアイテムを紹介します。

アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー

私は寝る前必ず使用しています。15分間目を40°で保温&マッサージしてくれて、本当に極楽の時間です。その後は快眠で、翌日の朝の目の疲労度が全くなくなりました。Amazonのレビューがこの商品の良さを物語っています。

筆者
筆者
303件レビューがついてて、評価が4.7と購入した方の殆どが「非常に満足」しているコスパ最強!超オススメのアイテムです!

座椅子DIYで疲労防止

長い間椅子に座って作業することはエンジニア、理系学生にとってはつきものだと思います。ですが、この椅子の性能によって作業後の疲労感が全く異なるということを意識したことがありますか?私は以下の2つのアイテムを使って座椅子をゲーミングチェア並みにアップデートしました。おかげで姿勢が安定し、作業後の疲労感も減りました。また何より集中して作業に打ち込めるようになりました。

IKSTAR クッション 低反発 座布団 第五世代 オフィス IKSTAR クッション 低反発【メーカー直営・1年保証付】 ランバーサポート
筆者
筆者
座椅子にホールド感が出て、座り心地が格段に向上します。長時間座っていても疲れにくくなるので引きこもりにならないように注意しましょう!作業に夢中で1日中座りっぱなしだった経験があるので...

コードの可読性を高める

自分が大型ベンチャーの内定インターンに初めて参加した時、周りの超優秀なエンジニアの方々のコードをみて自分のコードの汚さに絶望しました。その時自分のマネージャーに勧められた本がリーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニックという超有名な一冊です。美しいコードを書くためのエッセンスが凝縮されています。エンジニアを職種として選ぶ方は読まない理由がない一冊です。自分もこの本を読んで、かなりコーディングスキルが向上したと感じています。

ネットワークの基礎を押さえる本

ITの基礎がおぼつかなくて、ネットワークの話についていけなかった時、早稲田大学のエンジニアの友人が勧めてくれたのがネットワークはなぜつながるのか 第2版 という本です。ハードウエアから、理論までネットワークの基礎が非常にわかりやすく解説されています。「TCP」「IP」「リゾルバ」という用語を説明できないエンジニアは間違いなく買ったほうがいいです。自分は知らなくてバカにされたので。笑

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