見出し画像

NextJSとVercelでSSGする時の困りごと備忘録

最初に、この記事は、何かを解決できたという記事ではありません。。
ただの備忘録となります。

ここ最近、個人で、
NextJS(SSG) + Vercel Hosting + prisma + planetScaleを使いサイトを作っていました。

そもそもなんでSSGにしたか

AmplifyHostingの時も、VercelHostingの時も、NextJSのserverSidePropsを用いて、SSRで配信を行おうと試みていました。
しかし、どちらのhostingの場合もlamdaのようなコールドスタンバイからnextjsAPIが叩かれるのか?レスポンスがとても遅いです。
そのため、普通のSSRサイトを運営したいというモチベでは使えませんでした。
上記の原因が、prismaのORMの書き方が悪いのか、正しくindexを貼れば早くなるのか、hostingサービスの限界なのか、未だにわからず。。

そのため、取りうる選択肢としては、SSGしかなくなりました。
(APIサーバーを別建てするという選択肢もありますが、作りたかったサイトは、webサービスのようなインタラクティブなサイトではなく静的なサイトだったため)

vercelのビルド時間は45分がmaxということ

ブログや、情報を集めて掲載していくサイトだと、ページ数が多くなっていきます。自分が運営したいサイトも4000ページくらいありました。

SSGをNextJSで行う際には、getStaticPathを使って、あらかじめ静的なhtmlを生成できます。
調子にのって、数千ページをgetStaticPathに生成させるとビルド時間は肥大化していき、Vercelのbuildエラーが頻発しました。

Vercelのビルド時間は45分までなので、削らざるをえません。
(ただ疑問なのは、SSGってそういう物なのにビルド時間の制限があるんだ?とは思いました。)

vercelのトラブルシューティングに書いてあります
https://vercel.com/docs/deployments/troubleshoot-a-build#build-duration

ビルドは最大 45 分間実行できます。ビルドがこの時間を超えると、配置はキャンセルされ、 配置の[ビルド]ログにエラーが表示されます。この制限に遭遇した場合は、Next.jsプロジェクトのビルド時間を短縮する方法について説明したこのガイドを参照してください。

deepl翻訳

ビルド時間の短縮ガイドでは、主に

  • getStatichPathのfallbackを使って、事前の静的html生成をやめる

  • ISRを用いて、ビルド時間を減らす方法

ISRについては、まだ自分も理解不十分であるため、参考になりそうな記事を貼ります。

ISR/オンデマンドISRについて

調査継続中

今は、生成したいHTMLのURLにPCから連続でリクエスト送り続けて、vercelのビルド後にhtml生成しています。(ぶっちゃけとても楽、アタック攻撃してる感がつらい)

ISRや、On-demand ISRをつかってもう少し最適化をはかりたいので現在鋭意調査中。


この記事が気に入ったらサポートをしてみませんか?