Nuxt.jsで大規模なサイトをSPAで作って大丈夫？→やめた方がいいと思う

f:id:hollywis:20201103141159j:plain

こんにちは、のすけです。

Nuxt.jsチップスのお時間です。

シングルページアプリケーション

全てのページ１つのHTML上に展開し、ページ遷移はクライアントサイドのJSでガシガシ書き換えることで

夢のような高速なサイト作成ができる！！

サーバーサイドレンダリング( Universalモード)

Nuxt.jsはSSRとか行っておきながら、どちらもいいとこ取りする(どっちも実装しなくてはいけなくて辛い！？)

Universalモードというのがあります。

HTMLをサーバーサイドでレンダリングするので、SEOに強いと言われている(詳細は不明。もはやGoogleが追いついている気もするので気にする必要もないかも)

従来のサーバーサイドコーディング＆Vueを合わせた実装になり、かなり面倒。

サーバーサイドでHTMLをレンダリングするので貧弱なWebサーバーや回線だとSPAほどの速度は出ないが
Nuxt-linkを踏む場合のみ高速で画面遷移できる。

「Nuxt.jsで大規模なサイトをSPAで作って大丈夫？」

最初よく分からなくて、まぁSPAでいいしょ！と思って作っていたのですが、、、

SPAで１年間運用し、その間に機能拡張をしまくって盛り盛りになったプロジェクトは

どうなったのでしょうか？？

規模が大きくなるにつれ、初期訪問者のjsコードのロード時間が長くなり

「なかなかページが表示されない！」

という結果になりました。

そこで、Universalモードに切り替えたわけですが全てのページをSSR対応に書き換える必要があり、大変に面倒でした。

特にクライアントサイドで動くコードとサーバーサイドで動くコードは違うので、それに頭を悩ませました。

なので、プロジェクトが一定以上大きくなるページ数が30ページ越えるくらい？？

の場合には潔く Universalアプリケーションを選択してSSRした方が良いです。

SSRモードの挙動はかなり複雑です。

こちらの記事が参考になったのですが、クライアントサイドレンダリング(CSR)とサーバーサイドレンダリング(SSR)のライフサイクルが

「初回アクセス、リロード時」・・・URLを直接叩いたりaタグで遷移した際
「内部アクセス時」・・・nuxt-linkやrouterで遷移した際
で違う！！

というとても複雑な動きをするので、どちらにも対応したコーディングが求められたりします。

ここんところを熟読しつつ、行ける！と思った方は

Nuxt.js適性があると思います。

はりうすブログ (のすけのメモ)