AWS Amplify フレームワークの使い方Part15〜SSR対応導入編〜

はじめに

ついにこの日がやってきました。

AmplifyがSSRに対応しました！！！ﾊﾟﾁﾊﾟﾁﾊﾟﾁ

しかもメチャクチャ簡単なんです。

実装方法

ほんの少しの設定とコード修正だけでOKなんです。

基本設定

設定は、今までのamplify設定ファイルにssr: trueを追加するだけです。

plugins/amplify.js

import Vue from 'vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import awsExports from '../aws-exports'
Amplify.configure({ ...awsExports, ssr: true }) // これだけ
Vue.use(AmplifyModules)

たったこれだけで、SSRの設定完了です。

API/Auth/Storage

基本的にクライアントサイドでの実行については、一切コードを変更する必要はありません。(たぶん)
asyncDataやmiddlewareなどサーバーサイドで実行される関数についてのみ、withSSRContextを追加するだけです！

Auth

// import { Auth } from 'aws-amplify'
import { withSSRContext } from 'aws-amplify'

export async function getServerSideProps(context) {
  const { Auth } = withSSRContext({ req: context.req })
  const userInfo = await Auth.currentAuthenticatedUser()
}

API

// import { API, graphql } from 'aws-amplify'
import { withSSRContext, graphql } from 'aws-amplify'
import * as gqlQueries from '../graphql/queries' 

export async function getServerSideProps(context) {
  const { API } = withSSRContext(context)
  const userData = await API.graphql(gqlQueries.getUser, { id: 'taro'});
}

Storage

おそらくほぼ同じ書き方だと思われますが、未調査&未検証なので、また追記します。

おわりに

こんな簡単に実装できるなんて本当に素晴らしいですね。

またデプロイの方法ですが、Next.jsであれば下記参考の公式ブログに簡単なデプロイ方法も掲載されていますが、Nuxtは自力で決める必要があります。
とりあえず、CloudFront+LambdaEgeをServerlessFramework使って構成するのが現時点でのベストプラクティスなのかなと思っていますが、どうやらAmplifyコンソールで、SSRに対応するとかしないとかの話が出ているようなので、こちらの今後にも期待です。

Server-side rendering support / SSR #412

参考

SSR Support for AWS Amplify JavaScript Libraries