ちょっと話題の記事

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

AmplifyがNext.jsとNuxt.jsを利用したSSR(Server Side Rendering)をサポートしました!
2020.09.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

AmplifyがNext.jsとNuxt.jsを利用したSSR(Server Side Rendering)をサポートしました!

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

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

構成図

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

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

構築してみた

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

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

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

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

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

# serverless.yml
nextamplified:
  component: "@sls-next/serverless-component@1.16.0"

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

$ npx serverless

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

終わりに

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

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

参考サイト