SPAモード

SPAモードは、サイト内に存在しないパスへのアクセスに、404エラーの代わりに index.html を返す設定です。公開時・サイト管理ページの「詳細設定」で切り替えられます。

どういうときに必要?

React Router や Vue Router などを使ったSPA(シングルページアプリケーション)は、実体としては index.html が1枚だけあり、/about や /items/3 といったページ遷移をJavaScriptが画面の書き換えで表現しています。

このタイプのサイトで https://あなたのサイト.publee.site/about を直接開く(またはリロードする)と、サーバー上には about というファイルが存在しないため、通常は404エラーになってしまいます。

SPAモードをオンにすると、未マッチのパスでも index.html が返るので、JavaScript側のルーターが /about を解釈して正しい画面を表示できます。

SPAモード オフ:
  /about → about.html を探す → 無ければ 404

SPAモード オン:
  /about → about.html を探す → 無ければ index.html を返す
           (JS のルーターが /about の画面を描画)

オンにすべきサイト

• React / Vue / Svelte などで作った、ビルド結果が index.html + JS/CSS のサイト
• AIに「Reactでアプリを作って」と頼んで作った、URLでページが切り替わるアプリ
• 直接URLを開いたときに404になってしまうサイト(典型的なSPAの症状)

オフのままでよいサイト

• HTMLを貼り付けて公開した1ページのサイト(そもそも他のパスにアクセスされない)
• about.html などページごとにHTMLファイルがある普通の構成のサイト。この場合にオンにすると、タイプミスしたURLでも404にならずトップページが表示されるため、かえって分かりにくくなります

404.html との関係

サイトに 404.html を含めると、未マッチのパスでそのページが表示されます。ただしSPAモードがオンの場合は index.html へのフォールバックが優先され、404.html は使われません。

迷ったら

まずはオフのまま公開して、ページを移動したあとにリロードして404になったらオンにする、で問題ありません。設定はいつでも変えられ、URLは変わりません。