【Nuxt.js】各モードについてメモ。
はじめに
Nuxt.jsを日々使ってはいるものの、まだまだ知識不足な部分がある。 そのうちのひとつである、Nuxtのモードについて ふわっとした知識しかなかったため 今回実際に触れて つまづいたところなどをメモしておく。
それぞれのモードについて
モードはまず、3つある。
1. SSR(サーバー サイド レンダリング) 2. SPA(シングル ページ アプリケーション) 3. 静的モード
SSR
NuxtにはNuxtサーバー(node.js)と呼ばれるものがある。 Nuxtサーバー上で、あらかじめhtmlを生成し、ブラウザに表示する方法。
SEO
クローラーが完全にレンダリングされたページが最初に表示されるため、SEO観点で良いとされる。
高速
サーバー側にHTMLを作成する責務があるため、ユーザー側のデバイス・ネットワークに影響を受けない。
注意点
サーバーサイドとクライアントサイドそれぞれ固有のコードを使い分けなければいけない。(例:サーバー側では windowやdocumentといったブラウザのAPIは使用できない)
静的ファイルサーバーにデプロイできる完全に静的なSPAとは異なり、サーバーレンダリングアプリには、Node.jsサーバーを実行できる環境が必要
Node.jsでのレンダリングは、静的ファイルを提供するよりもCPUに負荷がかかるためサーバーに負荷がかかる。 高トラフィックが予想される場合は、対応するサーバーの負荷に備え、キャッシュなどを工夫し利用する必要がある。
SPA
SPAのビルドは'spa'モードで行い、/distの静的なファイルをサーバーにアップロードするのみ。
SPAは全てクライアントサイドで処理を行う。 必要な資材を全て最初にサーバー側より受け取り、再度リロードを行わない限り ブラウザ上でjavascriptがページのコンテンツの出し分けを行い、実際には遷移をしていないが、しているように見せる挙動をする。
注意点
初期のサーバーへの問い合わせが多いため、初期描画が遅い。
クローラが読み込む時点ではコンテンツが何もないためSEOの懸念点がある
静的モード
静的モードのビルドは'universal'モードで行い、事前にSSRでHTMLを作成しておく。
SSR時に、fetchしたAPIの情報を組み込んだ状態でレンダリング、ビルドを行うことで 完全にレンダリングされた静的ファイルが吐き出される。
もしユーザーのステータスに合わせてコンテンツを出し分ける場合は、generate時に 全てのデータを取得、コンテンツ側では、出し分ける処理をあらかじめ書いておく。
あまりにも動的にユーザーに合わせて表示を変更するような処理の場合は 複雑化する可能性が考えられる。
以上。
参考
- Vue SSRガイドhttps://ssr.vuejs.org/