Next.js10系をホストする場所についていろいろ試してみた時の話

2 min read

結論を言うとnext-serverlessを使った環境によって実現しています!

Serverless or Server について

まずはじめにEC2や、Fargateのようなサーバーを建てたらかんたんじゃない?という疑問に対しては、個人開発ではEC2やFargateのような常に起動してお金がかかる構成は嫌でした。
あとは、保守するコストもばかりになりません。

なので今回はServerlessでhostすることを前提としています。

ApiはAppSyncとAPIGateway

ServerlessでAPIを作るなら、RestならAPI Gateway、GraphQLならAppSync以外選択肢はないです。今回はどちらも使用しています。Serverless Framework を使用して共通的なRestAPIとそのサービスに特化した、GraphQLというふうな使い分けです。

DatabaseはDynamodb

サーバーレスなデータベースは、Aurora ServerlessかDynamodbのどちらかの選択肢しかありません。これは、テンプレート化しているRest APIのバックエンドにDynamoDBを使っているので、GraphQLのバックエンドもDynamodbでいいかなくらいののりです。AmplifyのAdminコンソールが便利という理由もあります。

フロントエンドはNext.js

自分はフロントエンドに特化していないので、そこらへんを意識させないNext.jsの思想は好きです。Next.js 10系の画像の最適化や、ISRの仕組みなども好きでした。

そして、Next.jsはserverlessでホストできることも知っていたためです。
Nuxtは現状ではVue3のサポートもできてなく、TypeScriptの恩恵も受けれないので、負債を憎む自分としてはなかったです。

ExpressやFastifyなどで、SSRとJavaScriptを別で各選択肢もありましたが、
Vanilla JavaScriptを書くのは嫌いじゃないけど、今回の目的の一つに高速開発したいという思いもあったのでNodeとJavaScript別々に書くのは避けたかったのです。

Next.jsをSSRで使いたい

  • 認証や認可の処理を伴ったときに、クライアントサイドでrefresh tokenをもたせたくない
  • seo系のメタタグについて、本当にSEOに影響がないのか判断しきれない
  • session情報をローカルストレージに持たせたくない。
  • 困ったときはサーバーサイドで処理できる精神的な余裕がほしい

という思いがありました。
私は割と保守的な人間なので、自分で確証できないものはちょっとと、spaを敬遠しがちです。
spa完全に理解している人にとっては、古い人間に見えるかもしれません。まだ28ですが...

Next.jsをSSRで使う際の選択肢

  • Vercelを使用する
  • Amplifyを使用する
  • next-serverlessを使用する

Vercelを使用する

Vercelを使用することで手に入れることができる環境

https://nextjs.org/docs/deployment
Vercel is made by the creators of Next.js and has first-class support for Next.js.

For example, the hybrid pages approach is fully supported out of the box.

Every page can either use Static Generation or Server-Side Rendering.
Pages that use Static Generation and assets (JS, CSS, images, fonts, etc) will automatically be served from Vercel's Edge Network, which is blazingly fast.
Pages that use Server-Side Rendering and API routes will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely.

簡単に言うと、
無限にスケールして、静的コンテンツはCDNによって高速配信、ISRに対応しているという話です。
その他にも、WebCoreVitalなどもaddonとして計測できるようです。
あとは、プルリクエストプレビュー環境モテに入ります。

ただ、商用で利用すると固定費がかかる。。。

Amplifyを使用する

AmplifyがSSRに対応したので、Next.jsもいけるのか?と思ったら、Next.js 9系でした。
ただ、9系でいいなら、プルリクエストプレビュー環境も入ってよいかと!

next-serverlessを使用する

つい先日α版でNext.jsの10系に対応したので、使ってみました!
すごい、ISRも対応しているし(SQSとLambdaを使って実現しているっぽい)なんと言っても、きめ細やかな設定ができます!

https://github.com/serverless-nextjs/serverless-next.js

何よりAWSで一貫するので、Lambda@edgeにroleさえ渡してしまえば、Dynamodbなどにサーバーサイドからアクセスすることができます。なんてこった。

まとめ

AWSサービスで完結したい + VercelにAWSのアクセスキーを起きたくなくて、商用利用したい人はnext-serverlessを選択肢として上げるのもよいのではないでしょうか?ただ、まだα版なので気をつけましょう。

Discussion

ログインするとコメントできます