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

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

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

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

まとめ

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

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

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