まえがき（経緯）

弊社では、今までVue.jsで書いていた物を、nuxt.jsに移行するらしい。
nuxt.jsで「サーバーサイドレンダリング」をする事で、seoに関する問題が解決するらしい。 なんのこっちゃ。
その際に、新人である僕にいくつか課題（理解すべき事項）が言い渡されました。
1. vue.jsはSEOでなぜ・どんな欠点を抱えているのか。
2. SSR(サーバーサイドレンダリング)とは
3. nuxt.jsのSSR対応方法(nuxt.jsをダウンロードして色々触ってみてSSRを実現させてください。)

これを、せっかくなのでここで纏めて見ようと思います。

この辺はネット上でもいろんな人の意見が錯綜している分野でもあるので、整理するのに割と苦労しました。
しかも所詮はネットの受け売りなので、ご意見ご指摘等ございましたら是非コメントいただけるとです。

vue.jsはSEOでなぜ欠点を抱えているのか。

これについては、vueの欠点というより、SPAが持つ欠点に直結しています。

SPAとは

シングルページアプリケーションの事。普通のやり方でwebページを作る時とは違い、単一のwebページ上でアプリケーションを構成する。
普通の使い方だとページ遷移（＝別のhtml等の読み込み）が発生するような場面でも、SPAだと必要な箇所のデータだけをサーバーから持ってくるだけで済む為、動作性がよい。

一方で、jsのコード量が増える為最初の読み込みに時間がかかる、コンテンツそのものをjsで作る為googlebot(クローラー)がjsを実行できなかった際にSEOの観点から与える影響が大きい等の欠点がある。

そして、これらのSPAが持つ課題を解決する為の一つとしてSSRが広く知られており、弊社では今回この方法をとるようです。

SSR(サーバーサイドレンダリング)とは

ブラウザが本来担うjsの処理をサーバーにやらせる事
これにはいくつかの利点があるそうな。。。

1. パフォーマンスの点での利点
・jsでゴリゴリ書かれたコードを読み込むのは、でかい画像を読み込むなんてものとは比べ物にならないレベルで最初のレンダリングに影響を与えるらしいです。
このjsの処理をブラウザに任せるのではなく予めサーバーで終わらせておく事で初期表示が早くなり、UX改善に繋がる。
そこが改善される事で、間接的にSEO対策にもなるのかも知れません。離脱する人減りそう。

2. SEOの観点での利点
SEOの観点では、昔から「クローラーが使っているjsエンジンが古い」という問題があり、仮にクローラーがjsを理解できないと、せっかく頑張って作ったアプリケーションがbotから見たら不完全なコンテンツ扱いされるらしい。悲しい。。
これを解決する為にはSSRが有効らしいです。具体的には、クローラーがjsの処理をする前にサーバーの中でjsを処理してしまい、クローラーが読み込める形にする事で先述の問題を回避できるという。

ただ、googleのすごい人ブログ（日本語版）にあるように、現在のgooglebotは最新のウェブプラットフォームの機能をサポートしているそうです。従来のクローラーだとインデックスされなかったコンテンツも現在は概ね問題ないそうです。
とはいえ、メタ情報はサーバ側から返ってくる時点で描画されている必要がある等の問題もあり、(https://qiita.com/seya/items/2688dc539af217b7b111) この辺の事まで考慮するのであればやはりSSRは有効な手段です。

注意

この記事にあるように、SSRしても他の要素次第で全然インデックスされないというケースも有るようです。。

検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。

考える事が多いんじゃ。。。

上記までの参考文献

State of SEO for SPA 2019
SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ！
ユーザー体験を向上させるサーバーサイドレンダリングJavaScript — 歴史と利点

Nuxt.jsでSSRしてみた

また今度。