Nuxt.jsでSSRを勉強してみる - どこにでもいるSEの備忘録

SPA（Single Page Application）はクライアントサイドの性能が高まってきた今日ではUXを高める非常に強力な選択と言えます。その一方で、SPAには課題もあり、その一つが初回ロードが重いというものです。

これはちょっと凝ったプロジェクトを作って、ネットワーク越しにアクセスするとよくわかりますが、めちゃくちゃ遅いです。 ネットワークの性能が悪いと、タイムアウトしたりもします。

ということで、最近のSPAはほぼほぼSSR（Server Side Rendering）が使用されるようになっています。 Vue.js関係だとNuxt.jsを使用するのが主流となっているので、今回はその使い方を勉強してみます。

SSR(Server Side Rendering) とは？
- SPAが遅い原因
- SSRの仕組み
Nuxt.jsとは？
- インストール
感想

SSR(Server Side Rendering) とは？

こちらの記事を参考にさせていただきました。

www.publickey1.jp

SPAが遅い原因

まず、古典的なWebアプリケーションの通信の流れはこんな感じになるかと思います。

f:id:nogawanogawa:20190802082249j:plain:w500

時代が進むにつれて、クライアントサイドの性能が上がってきて、今やスマートフォンでも10年前のノートPCと同じくらいの性能を持ってたり持ってなかったり、、、

性能が上がることで、通信がボトルネックになってしまいました。そんなわけなんで、多少重い処理をクライアント側に押し付けるように変えたのがSPAと捉えることができるかと思います。

f:id:nogawanogawa:20190802082320j:plain:w500

確かに、ページ遷移ごとにHTMLを毎回転送するわけではなくなるので、たしかにページ遷移は早くなります。しかし、今度問題になるのは、初回ページのロードでは先々に必要になるかもしれないコンポーネントやらjsやらを大量にダウンロードすることになります。これをすべてクライアントサイドでレンダリングして初めてページが表示されるため、初回だけ非常に低速になってしまうわけです。

その他、SPAはSEOが効かないことも大きな問題なのだそうですが、そのへんはよくわからないので、またの機会に。。。

SSRの仕組み

上記のような問題を解決する手法として、近年主流な方法としてSSR（Server Side Rendering）が登場してきました。 SSRではこんな感じの動作になります。

f:id:nogawanogawa:20190802084121j:plain:w500

その名の通り、サーバー側にもjavascriptを動作させ、サーバー側でレンダリング済みのHTMLを作成することを行います。

これにより、SPAのようにDOMの部分更新による高速なページ遷移を実現しつつ、クライアント側でのレンダリング負荷を抑えることが可能なため、結果としてレスポンスが早くなるといった仕組みです。

Nuxt.jsとは？

ja.nuxtjs.org

Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。

だそうです。

色々調べてみると、だいたいこんな感じのパッケージを組み合わせてNuxtはつくられているようです。

Vue2
Vue-Router
Vuex
Vue Server Renderer
Vue-Meta

qiita.com

要するに、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というプロジェクトがカレントディレクトリに生成されます。

サーバーを起動してアクセスしてみてこんな感じの画面が出てくれば成功です。