SPA(Single Page Application)はクライアントサイドの性能が高まってきた今日ではUXを高める非常に強力な選択と言えます。 その一方で、SPAには課題もあり、その一つが初回ロードが重いというものです。
これはちょっと凝ったプロジェクトを作って、ネットワーク越しにアクセスするとよくわかりますが、めちゃくちゃ遅いです。 ネットワークの性能が悪いと、タイムアウトしたりもします。
ということで、最近のSPAはほぼほぼSSR(Server Side Rendering)が使用されるようになっています。 Vue.js関係だとNuxt.jsを使用するのが主流となっているので、今回はその使い方を勉強してみます。
SSR(Server Side Rendering) とは?
こちらの記事を参考にさせていただきました。
SPAが遅い原因
まず、古典的なWebアプリケーションの通信の流れはこんな感じになるかと思います。
時代が進むにつれて、クライアントサイドの性能が上がってきて、今やスマートフォンでも10年前のノートPCと同じくらいの性能を持ってたり持ってなかったり、、、
性能が上がることで、通信がボトルネックになってしまいました。 そんなわけなんで、多少重い処理をクライアント側に押し付けるように変えたのがSPAと捉えることができるかと思います。
確かに、ページ遷移ごとにHTMLを毎回転送するわけではなくなるので、たしかにページ遷移は早くなります。 しかし、今度問題になるのは、初回ページのロードでは先々に必要になるかもしれないコンポーネントやらjsやらを大量にダウンロードすることになります。 これをすべてクライアントサイドでレンダリングして初めてページが表示されるため、初回だけ非常に低速になってしまうわけです。
その他、SPAはSEOが効かないことも大きな問題なのだそうですが、そのへんはよくわからないので、またの機会に。。。
SSRの仕組み
上記のような問題を解決する手法として、近年主流な方法としてSSR(Server Side Rendering)が登場してきました。 SSRではこんな感じの動作になります。
その名の通り、サーバー側にもjavascriptを動作させ、サーバー側でレンダリング済みのHTMLを作成することを行います。
これにより、SPAのようにDOMの部分更新による高速なページ遷移を実現しつつ、クライアント側でのレンダリング負荷を抑えることが可能なため、結果としてレスポンスが早くなるといった仕組みです。
Nuxt.jsとは?
Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。
だそうです。
色々調べてみると、だいたいこんな感じのパッケージを組み合わせてNuxtはつくられているようです。
- Vue2
- Vue-Router
- Vuex
- Vue Server Renderer
- Vue-Meta
要するに、Vueプロジェクトを作るときに必要そうなパッケージをセットにした良さげなフレームワークってことですね。
インストール
さて、ようやくNuxt.jsを使ってみます。
まずはnpxのインストールですがこんな感じです。
npm i npx
次にプロジェクトを作成します。
npx create-nuxt-app <プロジェクト名>
そうするとこんな感じに聞かれるので、適当に返してあげます。
$npx create-nuxt-app sample npx: 341個のパッケージを22.848秒でインストールしました。 create-nuxt-app v2.9.0 ✨ Generating Nuxt.js project in sample ? Project name sample ? Project description My sweet Nuxt.js project ? Author name hogehoge ? Choose the package manager Npm ? Choose UI framework None ? Choose custom server framework None (Recommended) ? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Choose test framework None ? Choose rendering mode Universal (SSR) 🎉 Successfully created project sample To get started: cd sample npm run dev To build & start for production: cd sample npm run build npm run start
上だとtestというプロジェクトがカレントディレクトリに生成されます。
サーバーを起動してアクセスしてみてこんな感じの画面が出てくれば成功です。
cd sample
npm run dev
その他のVue.jsとの違いは使いながら考えることにします。 パット見は結構似ていますが、SSRする上での違いとかもあると思いますので、そのへんは使いながら適宜記事にしたいと思います。
感想
フロントエンドの勉強を初めて、かれこれ半年くらい経ちましたが、まだまだ奥が深いですね。 ちょっとずつモダンな形式に作れるようになってきたかなとは思いますが、まだまだ勉強していかないといけないですね。