【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の情報を組み込んだ状態でレンダリング、ビルドを行うことで 完全にレンダリングされた静的ファイルが吐き出される。

これによりSEO観点ではSSR同様、安心である。

もしユーザーのステータスに合わせてコンテンツを出し分ける場合は、generate時に 全てのデータを取得、コンテンツ側では、出し分ける処理をあらかじめ書いておく。

あまりにも動的にユーザーに合わせて表示を変更するような処理の場合は 複雑化する可能性が考えられる。

以上。

参考