KATUBLO
2019年03月24日

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

こんにちは。KATUOです。

まずは反省からのスタート。理由はこれ。

 

今日は3月24日。最終登校日が3月21日。これはまずいw 今日書いたとしても、すでに2日もサボってしまっている状態です。別に暇なわけでは

ないですが、超絶忙しいわけもないので、サボってるといわれても何も言い返せないw とりあえず、経過日付分の記事は書いて、追いつきますw 本来は毎日コツコツ、長い期間をかけて継続することが大切なことだと思っているので、頑張ります。

 

SSR?CSR?ってなに?

vue.jsの勉強をしている最中に出てきた用語です。あまり見覚えがないので調べてみることにしました。

 

SSR (sever side rendering)

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

 

CSR (client side rendering)

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

 

 

vue.js + nuxt.js 上ではどのような順番で動く?

次に実際に「vue.js+nuxt.js」で動く環境でSSR、CSRはどのような順番でvue.js、nuxt.jsの関数を呼び出すのかということを調べてみました。実際のインターンの業務ではここでがっつりはまったりしたので、もう一度整理しないとやばいなって感じてます。

 

 

SSRでのフロー

SSRの実行の順番としては以下のようなフローで実行されます。

 

[1]プラグイン

[2]nuxtserverint

[3]共通ミドルウェア

[4]ページミドルウェア

[5]ページのvalidate

[6]ページのasyncData

[7]ページのfetch

[8]ページのcreated

 

CSRでのフロー

CSRの実行の順番としては以下のようなフローで実行されます。

 

[1]共通ミドルウェア

[2]ページミドルウェア

[3]ページのvalidate

[4]ページのasync

[5]コンポーネントのcreated

[6]コンポーネントのmounted

[7]ページのmounted

 

vue.jsのライフサイクルを整理する

公式サイトにvue.jsのライフサイクルのフローチャートが掲載されているのでこれを少し深掘りして整理します。

 

beforeCreated

インスタンスが生成され、vue.jsのライフサイクルが開始したと同時に実行される関数です。

 

created

beforeCreated同様、インスタンスが生成され、すなわち、ライフサイクルが初期化された時に呼び出される関数。インターンのメンターの方にはここでサーバーサイドから値を取得する処理などを書くのが良いとのアドバイスをもらいました。axiosなどを書いた記憶がる。この関数以降の処理はすべて、CSRのみで処理を行う。

 

beforeMount

el(ここでいうelementというのはtemplate内で指定している要素)にマウントされる前に実行される、関数です。

 

 

上のプログラムだとelはapp内のname要素ですね。マウントはまだしていないので、nameには値が入っていません。

 

mouted

インスタンスがマウントされた後に実行されます。インスタンスをマウントすると、DOM要素にアクセス可能となるため、this.等が使用可能になります。

 

beforeUpdate

データの更新があった際に呼ばれる関数です。更新直前なので、DOMの要素にアクセス可能です。

 

updated

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

 

beforeDestroy

インスタンスが削除される直前に呼ばれる関数です。

 

destory

インスタンスが削除された後に呼ばれる関数です。

 

まとめ

vueのライフサイクルに関しては各所、インスタンスの状況を指定して、処理を組み込むことができるというのがわかりました。

 

参考サイト

 

 

最後まで読んで頂き、ありがとうございました。
SNS等でのシェアが頂ければ幸いです。

関連記事

プロフィール

@KATUO

現在都内私立大学に通う大学4年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習をスタート。この時期からプログラミングにどハマりし、現在までに「AIスタートアップ」「Webマーケティング会社」でエンジニアとしての業務に没頭してきた。

過去の投稿