AmplifyでSSRしたいけど

Amplifyは、インフラのプロビジョニングからSDKの提供までしてくれる頼もしいテクノロジーパートナー。うちの会社でも重宝して各プロジェクトへ導入しています。

難点なのが、Nuxtjsなどへ組み込んで利用する際にSSR利用できないこと。

つまり、asyncDataメソッドやfetchのサーバーサイドの処理の時に、データを取得できないのだ。

まずは結論

SSRは非対応なので、諦める。

いきなり弱気かよ!って感じだけど、近い将来にSSR対応してくれそうな匂いがあるし、現状はGraphQLのクライアントとしての利用だけでも力を発揮するので、付き合い方を考えればいいと思う。

開発が圧倒的に効率化されるメリットは捨てがたいので、何かしらの形で利用はしたい。

SSRの対応状況

まず、このIssueが最も注目したい情報です。

https://github.com/aws-amplify/amplify-js/issues/1613

この中でAmplifyからSSR対応について下記のように行えますと回答ができています。

https://medium.com/open-graphql/ssr-graphql-apps-with-next-js-aws-appsync-eaf7fbeb1bde

つまり!!公式的には、SSR時には別途AppSyncのクライアント用意してどうにかしとけ!って感じらしいです...。

個人的には、実装部分として下記のように対応する必要がありますかなと思います。

  • クライアントサイドの処理はAmplify
  • サーバーサイド の処理は自前で作成(aws_exports.js読み込めばいいのかな)

結局工数かかるやんけ!Amplifyの意味!w

個人的なAmplifyとの付き合い方

僕は下記のユースケースでAmplifyを利用しています、近い将来SSR対応されたら伸び伸びと使いたいです。

  • 会員限定コンテンツ配信アプリケーション
  • 業務/基幹アプリケーション
  • その他SEO必要としないアプリケーション(オーガニック検索の流入のみ想定)