2023年版ウェブアプリを作るJSフレームワークを選定する

先日ウェブアプリを作る際にどういう構成にするかという記事を書きました。

この記事ではフロントエンドのフレームワークにAstroを使うと書きましたが、大問題が発覚しました。
なんとAstroをSSRさせるとsitemapが生成できないとのこと。
これはSEOを重視するウェブサイトとしては致命的です。

This integration cannot generate sitemap entries for dynamic routes in SSR mode.

https://docs.astro.build/en/guides/integrations-guide/sitemap/

@astrojs/sitemap

それで今の段階ではNext.jsかなーと考えているわけですが、どういう経緯でこの考えに至ったかを残しておきます。
（結論だけ先に書いてしまうと今回の前提は、SSRができること、アクセスごとにレンダリングが実施されるMPAであることなので、Next.jsが最有力ということになりました）

フレームワークによるレンダリングの違い

ウェブアプリを何で作るかという技術選定において、レンダリングの違いは非常に重要な要素となります。
レンダリングにはいくつか種類がありますが、知っている限り代表的なものを記載します。
どれが優れているとかではないので、どれがプロジェクトにとって最適なのかで選びます。

CSR

クライアントサイドレンダリングです。
いわゆるSPAなどに用いられ、ブラウザがレンダリングを実行します。

CSRがどういう仕組みかについては他にいくらでも詳しい記事があると思うのでそちらに譲りますが、SEOを気にしないウェブアプリを作るのであれば選択肢に入らなくもないです。
SPAは初期ロードが重いという欠点があるものの、その後の表示速度やトランジションなどはSSRに勝るものがあります。

ですがGoogleのクローラーがどのくらいjsをレンダリングできるのかがブラックボックスであること（だいたいレンダリングできると言っているけど信用するかどうかはあなた次第的な感じ）、ユーザーからしてみれば1ページのレンダリングだけで良いのに過剰なレンダリングによって初期読み込みが遅くなることという点で、SEOを重視するには向いていないかなと思います。

SEOを重視しない、それよりシームレスな動きやリッチな表現を優先したいという場合は選択肢に入るとは思いますが、今回はSEO重視なのでパス。

SSG

static site generatorです。
事前に静的なページとしてHTMLを生成し、ブラウザやサーバーでのレンダリング処理を最小化します。

動的なコンテンツがないウェブサイトの場合はSSGが最有力でしょう。
検討していたAstroは基本的にはSSGで利用すべきフレームワークです。
私が普段コーポレートサイトなどのウェブサイトを構築する際は、AstroでSSGを選択しています。

ちなみにSSGはビルドのたびに全ページ生成が走るのでビルド処理がどんどん重くなりがちですが、Next.jsではISRという段階的SSGとも言える方式が使えるとか。
ISRはアクセス時にビルドが走り、以降はキャッシュが有効である限りそのページが使われ、キャッシュが切れたら次回アクセスで再ビルドが走ります。
ISRは頻繁に更新が起きないけど動的なコンテンツがある場合には良さそうですね。

SSR

サーバーでレンダリングを行います。
SPAに対して、MPAというアプリで採用されます。

今回作りたいアプリはユーザーが情報を更新していく前提なので、動的なコンテンツを生成する必要がある上に、SEOも重視しています。
そのためSSRを採用する必要があります。
AstroをSSRさせてサイトマップまで作れたらAstroでよかったのにな…。

Astroがだめとなるとどれが1番簡単にSSRできるのか？と調べた結果、候補に上がっているのがNext.jsです。

なぜNext.jsなのか

Astroを採用すると決めた時点では、Next.jsはReactベースで触ったことないし、過剰スペックな気がすると言っていました。
ただSSRできるフレームワークとなると、Next.js、Nuxt.js、Svelte Kit、Gatsuby.jsなどが上がるでしょうか。

今回はSEOを重視したいので初期ロードが重くてその後速いというSPA的な挙動なしたくありません。
ページにアクセスするたびにサーバーでレンダリングしてほしいのです。
こういうMPA的な挙動をするフレームワークとなると、Next.jsかNuxt.jsとなってくるようです。

Nuxt2を使っていたこともあるのでNuxtでもいいかなーと思ったのですが、NuxtをSSRさせるとなるとFirebaseなどにホスティングしなければなりません。
これが結構意味不明なんですよね。

そうなると残ったのでNext.jsです。
Next.jsはVercelという最強の相棒がいます。
ちょっとやったことないのでどのくらい簡単にできるのかは分からないですが、きっとVercelで簡単にSSRしてくれるんじゃないか…？という希望願望からNext.jsが良いのではと言っております。

まとめ

SSRでMPAを作れてサイトマップが生成できるフレームワークとなるとNextかNuxtか、という感じということが判明しました。
数年後にはきっと違うフレームワークがあわられるでしょう。

なんにせよ、Nextをvercelにデプロイしてどんな感じか試してみたいと思います。