[アップデート]AmplifyがNext.jsとNuxt.jsを利用したSSR（Server Side Rendering）に対応しました！

AmplifyがNext.jsとNuxt.jsを利用したSSR（Server Side Rendering）をサポートしました！

• Amplify JavaScript adds server-side rendering (SSR) support for frameworks like Next.js and Nuxt.js

これまで、AmplifyはSPAで構築するのが基本でしたが、SSRな構成をとることもできるようになり、選択の幅が広がったと思います！

このSSR環境をさっそく構築してみました！

構成図

AmplifyでNext.jsを利用してSSR環境を構築するとこんな感じの構成になります。

Serveless Frameworkを利用して、Lambda@EdgeでレンダリングするSSR可能なCloudFrontを構築することで、SSRを実現しています。

構築してみた

AmplifyのNext.jsのGetting startedに、SSR環境の構築方法も載っているのでこちらをやってみます。

• Getting started - Amplify Docs

このチュートリアルを進めていき、next dev コマンドを実行してNext.jsアプリケーションを動かすと、こんな感じのログイン画面付きトップページを構築できます。

ログインすると、ToDoをAppSync（GraphQL）のバックエンドAPIを通して、DynamoDBに保存できるというシンプルなアプリケーションです。 これが簡単にSSRで構築できるようになっています！

SSRなNext.jsアプリケーションをAWS環境へデプロイするのに、 Serverless framework を利用しています。

• Tutorial - Deploy and host app - Amplify Docs

そのため、serverless.yml ファイルを作成して。

# serverless.yml
nextamplified:
  component: "@sls-next/[email protected]"

serverlessのコマンドを実行するだけで。

$ npx serverless

次の図の「Serveless Frameworkで構築」で示した様な、Lambda@EdgeでレンダリングするSSR可能なCloudFrontが簡単にデプロイできます！

終わりに

AmplifyがSSRに対応したことで、Amplifyで構築できるWebアプリケーションの幅がぐっと広がると思います。

まだチュートリアルくらいしか触れていないので、AmplifyでSSRなアプリケーションをどう構築していくのか、いろいろさわって感触を確かめてみようと思います。

参考サイト

• Next.jsアプリをLambda@Edgeで超簡単にSSRできるserverless-next.jsのご紹介 - Qiita