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

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

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

Nuxt.jsはSPA・Universalモード(SSR&SPA)を選択できるのだけど

SPA(Single Page Application)

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

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

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

SSR(Server Side Rendering)

サーバーサイド[レンダリング](http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0)( 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時の注意点

[SSR](http://d.hatena.ne.jp/keyword/SSR)モードの挙動はかなり複雑です。

Nuxt.jsのSSR/CSR処理について - 株式会社Japonline

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

「初回アクセス、リロード時」・・・URLを直接叩いたりaタグで遷移した際

「内部アクセス時」・・・nuxt-linkやrouterで遷移した際

で違う！！

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

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

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