SPA/SSR/SSG/ISR/SWR どれを使うのがいいのか

Question

初めて質問させていただきます。

結論から言うと、表題の通り、私がやりたい開発にはどれを使うべきなのか、知見をいただきたいです。

現在、SPAで開発しているWEBサイトがあります。フロントエンドにReact、フレームワークにNext.jsを使用しています。
その中で、とある文字列を検索→外部APIから検索条件に一致するデータを取ってくる→検索結果のページに情報を表示する　というサービスを作りたいと考えています。

【やりたいこと】

• SEOに強くしたい（検索結果からのサイトへの流入を増やしたいため）
• 外部APIのデータは毎日頻繁に更新されるため、その情報はリアルタイムで更新して表示させたい
• データ数が膨大（500万件ほどある）

上記の条件を満たせるものでどのように開発すれば良いか色々自分なりに調べました。

• SPAはSEOに弱いと見たが、近年はどうなのか
• ページ数が膨大なので、SSGだとビルド毎に時間がかかってしまうし、リアルタイム性がないのでおそらく無し。
• ISRはVercel依存で、WEBサーバにVercelを使用していないので、おそらく無理。
• SSRが良さそうだが、色々記事を見ているうちに、SPAとの相性が悪い（開発が難しい）というのを見た
• SWRについては調べてもよく分からなかった。（そもそも静的サイトジェネレータなのか？）

SPA/SSR/SSG/ISRの違いは分かってきたのですが、SWRについてはいまいち分かっていません。
私のやりたいことはどれを使うのが望ましいでしょうか。
皆さんのご意見をいただきたいです。

Answer 1

SWR は データ取得のための React Hooks ライブラリです。SSG とは関係ありません。

個人的な感想を言えば、SPA にしたい理由が分からないため（どういう場面で SPA であることにメリットがあるのでしょう）、全て SSR 前提の MPA として実装するのが最もシンプルな解決策だと考えます。

SPA が SEO に弱いというのは、検索エンジンの仕組みを考えれば分かることで、クライアントサイド JavaScript の処理結果を検索エンジンがクロールできるのかという話です。Google だけ考えた場合、ある程度は JavaScript の実行結果を解釈してくれるため、SEO に全く対応できないわけではありません。

SSR なしの SPA だとしても、プリレンダリングを実装することで SSR 相当の検索エンジン対応は可能かと思います。内容の更新が頻繁だとは言っても、タイトルなど重要なキーワードはそれほど変わらない部分があると思うので、そうした重要なキーワードだけをサーバサイド側でレスポンスするようにするだけでも SEO 対応は（プリレンダリングでも）十分できるのではないでしょうか。

どういう SPA （規模や機能）なのかが分かりませんが、SPA 前提で実装するのであればプリレンダリングを検討しても良いかもしれません。

ところで、"Web" は略語ではないので全て大文字で書かずに Web と書いた方が良いでしょう。

Comments

[shiho0420]

ご回答ありがとうございます。
やはりSSRが最適なんですね。

＞タイトルなど重要なキーワードはそれほど変わらない部分があると思うので、そうした重要なキーワードだけをサーバサイド側でレスポンスするようにするだけでも SEO 対応は（プリレンダリングでも）十分できるのではないでしょうか。
そんな方法もあるとは初めて知りました！とても勉強になります。ありがとうございます。

＞ところで、"Web" は略語ではないので全て大文字で書かずに Web と書いた方が良いでしょう。
ご指摘ありがとうございます。今後気をつけます。