ブログ作成のためのSSG(ISR含む),常時SSR,初回SSR,CSR選定

2022年10月08日

開発メモです

※ここでは以下の定義にします

  • SSG=プリレンダリング Gatsby等
  • 常時SSR=ページ遷移等で毎回サーバーへリクエストする PHPのテンプレートエンジン等
  • 初回SSR=ブラウザ単位で、一度読み込んだら、次以降はサーバーにリクエストしない Nextjs等のSSRを指す
  • CSR=SPA=シングルページアプリケーションで、内容はAPIサーバー等を叩いてデータを表示する

最初に

  • 絶対ムリなものを判定
  • SEO対策が最強であること
  • かけるコストは最小限に

絶対ムリなものを判定

  • DBに個人情報など秘匿情報がふくまれる可能性はなく、SSGは使用可能か?
    • ただの自分が投稿するブログなので問題ない。第三者が投稿するならアウトだが。今回は使用可能。
  • SEOにこだわる必要はなく、CSR=(SPA)は使用可能か?
    • ブログなのでSEOは大切。使用できない
      • 初回ページがレンダリングできないので、SEOには不向き
        • Googleはクロール時にJavaScriptを使用してくれるが、それ以外のbing等は無理(使用7%ほどだが捨てることになる)
      • 動的ルーティングだとOGPが変更できない
      • 404ページで、404ステータスを返せない
        • ソフト404になる

この状態で考えれるのは SSG,常時SSR,初回SSR,CSR となる。

SSG vs 常時SSR vs 初回SSR

こちらでもう決まってしまった感があるが、ページ遷移ごとにすべてレンダーする常時SSRは無謀である。

負荷が大きくサーバー台がかかるので、WordPressなどは❌。

かけるコストは最小限に

SDGs的にもよくない。

この時点では以下になる。

SSG,常時SSR,初回SSR,CSR

ここからは議論ポイントになる。

SSG vs 初回SSR

Gatsby vs Nuxtjs or Nextjs みたいな

ここからは複雑になってくるため、どちらでも良いと思う。 しかし、もう少し突き詰めてみる。

再度質問

  • 記事数は100を超えるか? その場合、SSGが使えない。
    • ブログだと数年後には100超えることがあるかも

ページ数が100など多くなった時に、ページジェネレート時に時間がかかるだけではなく、メモリ不足の可能性が出てくる。

そこで SSG の中でもインクリメンタルビルド(ISR)という、初回リクエスト時にビルドを行い、後は作成後のキャッシュを読み込ませるという方法を用いることを検討した。

Gatsby では incremental builds、 Nextjs では incremental static build と呼んでいるらしい

ただ結局サーバー必要になるんじゃないか?と一度考える。

ISRでも初回SSRでも。

もし、レンタルサーバーを借りて、常時SSRを行う場合、そこにはユーザーごとにアクセスが来た場合、毎回レンダーして返すことになる。 常時SSRよりは圧倒的にコストは減らせるはず。

話は戻るが、SSG(ISR) VS 初回SSRとなるが、

SEO対策が最強であること

今回は最強のSEOを重視するためにSSG(ISR)を採用することにする。 ただし、ジェネレートに時間がかかっているなと認識するようになってからでよく、50記事程度なら Netlifyでのビルド等で問題ない。

結果

SSG(ISR)を使用。 記事が増えた際は Gatsby Cloud でも使用するかな。