Wantedlyは、月間150万人が利用する国内最大のビジネスSNSです

This page is intended for users in Japan. Go to the page for users in United States.

【開発者ブログ】今さら聞けない?Vue.js+Nuxt.jsでサーバサイドレンダリング

こんにちは、フロントエンドエンジニアの小原です。
去る10/4に恵比寿で開催された「Vue.js Tokyo v-meetup #5」に参加してきました。

以下が勉強会の発表資料です。
Nuxt.jsで業務システムを作った話 by Wakame
Vueのバックエンドとして Firebaseを使った話 by UrVerySpecial
Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か by Yosuke Ishikawa
Nuxt.js本格導入で遠回りしないためのTips by Shinji Yamada
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
以前のブログでも書きましたが、Vue.jsは既存アプリへの部分導入から本格的なSPAまで幅広く対応しているJavaScriptフレームワークです。今回の勉強会は主に「Nuxt.jsを使ったサーバサイドレンダリング」についてのものが多かったです。そんな訳で、今回は「今さら聞けない?Vue.js+Nuxt.jsでサーバサイドレンダリング」です(この「今さら聞けない?」はシリーズ化しそう…)。

そもそもサーバサイドレンダリングって

簡単に言うと「SPAなどで本来クライアントで生成するHTMLをサーバで生成する」というものです。図にするとこんな感じ

去年の秋ぐらいに、某社の技術ブログで見たとき「なんでSPAにしたのにわざわざまたサーバでレンダリング?」と、自分自身正直なところメリットが理解できていませんでした。それなら従来的なPHPとかでええやんと(現に“サーバサイドレンダリング”でググるとサーバーサイドレンダリング不要論なんてQiitaのページが出てきます)。
しかし、以前とあるエンジニア(インフラよりのフルスタック系の人)に聞いたところ以下のようにご教示いただきました。
・従来的なバックエンド処理に比べてインフラコストが下がる
・通常のSPAに比べて初期表示が早い
・SEOに強い(metaやOGPなども吐き出してくれる、ただしこれは諸説あり)
などがあるそうです。従来的なWebアプリケーションとSPAのいいとこ取りですね。
ただ、SSRはSPA以上に実装工数が多く、どうしても開発コストが上がりがちです。そこで出てきたのがNuxt.jsです。

Nuxt.js - ユニバーサル Vue.js アプリケーション
Vue.jsアプリケーションでSSRするためのフレームワークだそうです。以下の便利機能があります。
・サーバサイドレンダリング
・ES6/ES7のトランスパイル
・ルーティング機能
・JS/CSSの圧縮
・Sassなどのコンパイル
・Head要素内の管理
・開発モードにおける自動リロード
コンパイルやミニファイや自動リロードなどはwebpackの機能ですが、このようなことが出来ます。従来のRailsやGulpなどでサポートしている機能をVue.js+webpackで実現している感じです。webpackプラグインを使えば、Typescriptなど他のaltJSも使えるようです。これとNode.jsを組み合わせれば、ほぼJavaScriptだけでWebアプリケーションが構築できますね。
当日のLTではVueのバックエンドとして Firebaseを使った話というものもあったので、軽量アプリならFirebase+Vue.jsという選択肢も出てきそうです。

どこでどうやって使う?

さて、Vue.jsのメリットとして既存のフレームワークやWebアプリケーションへの部分導入というものがありますが(ブラニューでもそういった導入の仕方をしています)、流石にNuxt.jsでアプリケーションを作ろうとすると、新規開発するか完全にリプレースするかのいずれかになるかと思います。
今後、自分たちの開発で導入していくとすれば、マイクロサービス的に新たに機能を追加する場合とかでしょうか。そして次の「今さら聞けない?シリーズ」は「今さら聞けない?マイクロサービス」になりそうです。

ブラニュー株式会社では一緒に働く仲間を募集しています
Anonymous
Ae5c085c 7a31 499b b5e3 e347c87a28c1
Picture?height=40&width=40
Picture?height=40&width=40
2380eedd 9523 4d21 b75d 8f3c7a1b09ea?1502332293
Picture?height=40&width=40
7 いいね!
Anonymous
Ae5c085c 7a31 499b b5e3 e347c87a28c1
Picture?height=40&width=40
Picture?height=40&width=40
2380eedd 9523 4d21 b75d 8f3c7a1b09ea?1502332293
Picture?height=40&width=40
7 いいね!

今週のランキング

ランキングをみる

Page top icon