フロントエンド開発の選択肢
最近、自分はプロジェクトを開発するときにバックエンドもフロントエンドも一括で動かしたい、つまりフルスタックで一気に開発できるようなフレームワークとしてVite + React + Honoを採用していました。
これに加えてTanstack Routerを使うことで、Next.jsっぽいことができるわけです。
Next.jsは何でもできる便利なものですが、開発していると重くなったり、とある機能(ここでは敢えて伏せます)が使えなかったりで痒いところに手が届かなかったりしました。
で、これで基本的には問題がなかったのですが、ある問題に直面しました。
選択肢の狭さ
Vite + React + Honoの組み合わせの最大の利点は「とにかく速い」ということです。
SSGには負けるものの、ViteはCSRをベースにしているのでSSRよりは格段に速いです。SSGはコンテンツの内容を動的に変えることができないので、バックエンドと連携してそれなりに速さが欲しい場合にはCSRは有効な選択肢の一つです。
で、基本的にはそれで問題がないのですが、Vite + Reactを選ぶと「基本的にCSRしか利用できない」という問題が発覚しました。
| 項目 | CSR (Client Side Rendering) | SSR (Server Side Rendering) | SSG (Static Site Generation) |
|---|---|---|---|
| 概要 | 最初は空HTMLを返して、JSで描画 | リクエストごとにサーバーでHTML生成 | ビルド時にHTMLを生成して配信 |
| 主な対応フレームワーク | Vite + React | Next.js | Next.js / Vite(SSG構成) |
| 初回表示速度 | 遅め（JS実行待ち） | 速い | 最速 |
| 2回目以降の表示 | 速い | 速い | 速い |
| SEO | 弱い（対策必須） | 強い | とても強い |
| OGP / SNSプレビュー | 弱い | 強い | とても強い |
| サーバー負荷 | 低い | 高い | ほぼゼロ |
| 更新頻度が高いページ | 向いている | 向いている | 向いていない |
| 向いている用途 | 管理画面、Webアプリ | 動的ページ、EC | ブログ、LP、ドキュメント |
なにが言いたいかというと、CSRはJavaScriptでコンテンツ全てをククライアン側で生成するという以上、最初は空っぽのindex.htmlが返ってくるのでSEO対策が難しくなってしまうという点です。
また、静的なページであったとしても一部だけをSSGにするような融通が効かせづらく(特にTanstack Routerを使う場合には)、たった一つの動的なページを生成するためだけにSSGのメリットを放棄した上でSEO対策がしづらくなるという欠点を抱えています。
元々、自分はSEO対策には無頓着だったのですが、今回開発に携わったビッカメ娘のウェブサイトは「いろいろな人に使ってほしい」、「広まってほしい」ということを考えたときに、CSRしか選択できないReact + Viteのデメリットが大きくなってしまったのです。
では、これを解決するためにはどうしたらいいのでしょうか。