AmplifyでNuxtjsをデプロイ!SSRモードでのデプロイは可能なのか?

AmplifyでNuxtjsをデプロイ!SSRモードでのデプロイは可能なのか?

こんちには!

AWS Amplify の開発プロジェクトが増えてきた最近では、SEO 対策を兼ねてSSRしたいといった声が非常に多いです。

Google 的には SSR しなくても評価しますよと明言していますが、実際はどうなんでしょうか?

Google ボットの挙動周りから、AWS Amplify の SSR 事情に触れていきます。

Google ボットの SPA に対する挙動

SPA の話をする前に、Google ボットの挙動について把握しておきましょう。

通説ではGoogleボットは下記のように SPA ページではインデックスを収集するそうです。

  1. Ajax 呼び出しの実行を Await (待機)
  2. 各ページのスナップショット取得に5〜20秒待機
  3. Search Console の要求に応じてフェッチ(「 T5 」と呼称)、自然検索によるフェッチ(「T20」と呼称)は挙動が異なる
  4. T5 は約 5 秒後にスナップショットを取得し、T20 は約 20 秒後にスナップショットを取得
  5. ページの異なるセクションは、異なる時間にスナップショットされます。たとえば、T20 の場合、タイトルには常に T19 があり、メタ説明には T20 があります。
  6. スナップショットは不安定な様子でたとえば、スナップショットは5秒後に取得されますが、ページには 10 秒後に到着した Ajax 呼び出しの結果がすでに表示されていたりと…

まぁつまり、不確定様子もありなんとも言えない状況です。

結論 SSR にしておくのが無難ですね。

Amplify の SSR 方法はあるの?

結論、Amplify フレームワークの SSR 方法は公式サポートでは存在しません。

Amplify の SSR に関する該当の Issue を紹介します。(代表の益子もコメントしています)

まず、Issue によると、結論

  • 現状では対応していない
  • SSR 対応を希望する Amplify ユーザーが多数
  • 今後 NextJS で対応されていく傾向あり

今後 NextJS では対応されていくかもしれませんが、Nuxtjsについては雲行き怪しいです…。NextJS が優先的にサポートされていく様子ですね。

通説、アジアは VueJS、欧米では ReactJS なんてよく言われているので仕方ないかもしれませんね。( NextJS で SSR できれば NuxtJS でもできる可能性が高いので NuxtJS ユーザーも希望を捨ててはいけません)

また対応時期などは特に言及されておらず、いつ対応されるのかはわかりません。

では Nuxtjs で Ampliify の SSR は諦めるべきなのか?

AWS Amplifyよりaws-amplify / @unstableバージョンが公開されている様子です。

わたしたちもaws-amplify/@unstableバージョンを用いて NuxtJS のサンプルアプリを作成しuniversal modeにてデプロイして見たところ、苦しめられたnavigatorエラーがなくなりました!

発生するエラー内容:

Error Details:
ReferenceError: navigator is not defined

プルリクエストの引用・解決策の抜粋:

I have confirmed that using ‘npm install aws-amplify/@unstable‘ resolved my issue with the gatsby build process through ‘gatsby develop’, ‘gatsby build’, and through deploying from Amplify Console.

“dependencies”: {
“aws-amplify”: “^1.2.5-unstable.10”,

}

aws-amplify/@unstableを使用するといけました。

Amplify Console を用いてデプロイしてみてください。

まとめ

@unstableなので、今後使用できなくなる可能性も孕んでおり利用は怖いですね。わたしたちは、GraphQL で SSR をどうしてもしたい場合は、 Apollo を拡張した AppSyncSDK を採用し SSR させるケースがあります。

Amplify 採用の際は、 SEO 要件を慎重に検討しましょう。

Amplify での開発はお気軽に相談ください。