Gridsomeで1万ページ以上の中規模サイトを構築した感想

構築はやや難点もあるけど。ほぼVue.js

データの扱いやwindowプロパティが使えないなどGridsome特有の問題もありますが、そこさえ気をつけておけば概ねVue.jsのサイトとして構築できました。この点はかなりポイントが高いですね。

createdやmountedのタイミングが独自だったり、GraphQLで渡せるパラメータが何のかがわからなかったり、豊富に見えるドキュメントでも、構築してみると意外と穴があるので、そこはトライ＆エラーになってしまうのが難点ですが、これからに期待でしょう。

内部リンク数は注意したほうがいい

構築する際に注意したいのは、内部リンクです。

Gridsomeは高速ロードを実現するために、ページを開く際にページに貼られている内部リンク先のデータをpreloadしているようで、内部リンクが数百あるようなページだとロードにかなり時間がかかります。gridsome developでプレビューしていると内部通信なのでそこまで気になりませんが、本番に出すと急にページがロードしなくなって焦ります。

ページロードが遅延すると、ユーザービリティがかなり下がってしまうので、内部リンクは50くらいに押さえておくのが懸命です。また、1ページあたりのデータ容量にも注意しないと、preloadで渋滞してレンダリングブロックが発生します。

CDNを含めて、キャッシュをうまく使う必要がある

Gridsomeは、リンクされているページのデータを先読みする関係で、平行ダウンロードするファイル数が多くなり、レンダリング完了までのデータロード時間が長くなりがちです。なるべくロードを高速化するには、ブラウザキャッシュのTTLを長くしたり、CDNを使って高速ロードを実現する必要があります。

特に静的に出力しているページは、/assets/data/以下のjsonファイルのブラウザキャッシュのTTLを0にしていると、毎回ロードが発生してページ遷移（特に戻る時）に遅延が発生して、「何も動かない時間」が数秒生まれてしまいます。ユーザーにとってはバグ同然なので確実に回避したいところです。

また、Gridsomeは、jsファイルなどベースを構成するファイルは、ビルドごとにhash値を含んでいるのでCDNに限らず、ブラウザにキャッシュする場合も注意が必要です。また、ページごとのjsonはファイル名が固定なので、同様にCDNにキャッシュする際は注意が必要です。

ビルド時間は意外と速い

Gridsomeを使う場合は、VercelやNetlifyなどのビルド機能付きホスティングサービスを使う方が多いかと思いますが、注意ポイントはビルド時間です。

Gridsomeは、100ページくらいだとHUGOなどの他の静的サイトジェネレータよりもビルドに時間がかかりますが、それでも1万ページを超えるような規模のサイトでデータが複雑だと、Gridsomeのが速いケースもあります。ここはGraphQLの恩恵でしょうか。

とはいえ、今回構築したサイトは1万ページでNetlifyでビルドが300秒（5分）くらいだったので、許容範囲内ではないでしょうか。

問題はデプロイ時間

Gridsomeは、予めページを出力しておくため、ページ数が多いほどデプロイで本番にアップロードするファイル数が増えます。ファイル数が多いと当然デプロイに時間がかかります。

今回のサイトでいうと、ビルドは5分くらいですが、デプロイは20分以上かかりました。合計で25分ほどです。Netlifyは無料プランでは一ヶ月300分までしかビルド時間がないので、毎日のようにビルドするサイトの場合はかなり厳しいと言えます。ここは静的サイトの宿命ですね。

ビルド時間の使用量を削減をするのであれば、ローカルでビルドをしてNetlify CLIで直接デプロイするのがベストです。

netlify deploy --dir=dist/


Deploying to draft URL...
✔ Finished hashing 19723 files
✔ CDN requesting 19710 files
✔ Finished uploading 19712 assets
✔ Deploy is live!

デプロイが終わると一時公開URLで公開されます。そこから本番URLにpublishedにするにはNetlifyの管理画面から行います。もしくは、デプロイ時に「 –prod」をつけると一気に本番URLに公開されます。

Gridsomeのサイトはどうしてもファイル数が相当あるので、デプロイには時間がかかりますが（1万ページで30分強）、NetlifyのCI/CDビルドよりかは遥かに高速で、ローカルからのデプロイはNetlifyのビルド時間を消費しないので、マシンパワーや高速回線なのであれば結構オススメです。

ちょっとした更新でも全てビルド&デプロイ

ページ数が100ページくらいのサイトでは気になりませんが、1万ページを超えてくると、1ビルドで20分以上かかるので、気軽にビルド&デプロイできません。ちょっとしたエラー修正や記事の更新でも、本番に出て行くのに30分近くかかるのでかなりもどかしく感じます。

運用も含めて考えると、Gridsomeで構築する場合、静的にページを出力するのは1万ページくらいが限界ではないでしょうか。あとはAPIから動的にデータを取得するページと組み合わせるのがベストかと思います。

更新頻度が高いなら絶対VPSを使おう

今回のサイトは更新頻度が週に2、3回程度のサイトだったので問題なかったですが、合計ページ数が1,000ページ以上で、毎日数回更新をかけるようなサイトの場合は、Netlifyはやめた方がいいです。ビルド時間の使用枠がすぐに無くなります。

Netlifyの有料プランは割高なので、VPSをレンタルしてDokkuあたりを使ったほうが幸せになれるかと思います。デプロイ時間もないに等しいので高速デプロイですし。

Gridsomeで1万ページ以上の中規模サイトを構築した感想でした。

ベースがVue.jsなので、短時間でそこそこ複雑なサイトを作りつつ、SSRしないでもSEOができるので、かなり有りだなと思いました。