React/Vite のサイトを事前レンダリングして、検索や審査に対応する

なぜ事前レンダリングが必要か

React で作ったサイトは、多くの場合、最初に届く HTML の中身がほぼ空です。ブラウザが JavaScript を読み込んで動かしてから、やっと本文が表示されます。人がブラウザで見る分には、ほとんど違いを感じません。

しかし、検索エンジンや広告の審査のプログラムが、いつも JavaScript を最後まで動かしてくれるとは限りません。HTML に本文が入っていないと、「中身のないページ」と見られるおそれがあります。そこで、ビルドのときに各ページの完成した HTML を作っておく「事前レンダリング」を取り入れました。

用語の説明

• React（リアクト）：画面を部品の組み合わせで作るための JavaScript のライブラリ
• Vite（ヴィート）：React などのサイトを開発し、公開用にビルドするためのツール
• 事前レンダリング（プリレンダリング）：ビルドのときに、ページごとの HTML を作っておくこと
• SPA（シングルページアプリケーション）：1つの HTML の中で、JavaScript が画面を切り替える作り
• ルート：「/about」のような、ページごとの URL のパス

事前レンダリングの考え方

やり方はいくつかありますが、基本の考え方は同じです。ビルドのときに、サイトのすべてのページの URL を順に取り出し、それぞれの画面を HTML の文字列にして、ファイルとして保存します。

例えば「/about」のページなら、dist フォルダの中に「about/index.html」ができ、その中に本文が入った状態になります。公開した後は、ブラウザが JavaScript を読み込むと、いつもの React のサイトとして動きます。

1. サイトのページの一覧（ルートの一覧）を用意する
2. ビルドのときに、各ページを HTML の文字列に変換する
3. ページごとに index.html として保存する
4. タイトルや説明文（meta タグ）も、ページごとに入れる

私の場合

私のサイトは、すべて Vite と React で作っています。記事の内容は、データのファイルにまとめて持っています。ビルドのときにそのデータから全ページの URL を作り、1ページずつ HTML を書き出しています。サイトマップも、同じページの一覧から作っています。

きっかけは、脳トレのサイトが AdSense の審査で「有用性の低いコンテンツ」と判断されたことでした。ページの HTML を開いてみると、本文がほとんど入っていなかったため、すべてのサイトを事前レンダリングに切り替えました。具体的なやり方は、AI に相談しながら作り、自分で動きを確認しました。

確認の方法

事前レンダリングができているかは、次の方法で確認できます。

• ビルドした後の dist フォルダを開き、ページごとの HTML ファイルがあるかを見る
• その HTML をテキストエディタで開き、本文の文章が入っているかを確認する
• 公開したページで、ブラウザの「ページのソースを表示」を開き、本文があるかを見る
• ページごとに、title タグと説明文が違うものになっているかを確認する

よくあるつまずき

• ブラウザでしか使えない機能（画面の幅の取得など）を、HTML を作る段階で使ってしまい、ビルドが失敗する
• ページの一覧に新しい記事を足し忘れ、その記事だけ HTML ができていない
• 全ページの title が同じままになっている
• HTML の中身と、JavaScript が動いた後の画面が食い違い、表示が一瞬乱れる

ゲームやツールのページの扱い

ゲームや計算ツールのように、JavaScript が動かないと使えない部分は、事前レンダリングしても中身は作れません。そこで、ゲームの画面の周りに、遊び方や説明の文章を置くようにしました。HTML には説明の文章が入り、ゲームそのものは JavaScript が動いてから表示されます。

次にやること

事前レンダリングができたら、sitemap.xml にすべてのページが入っているかを確認し、Search Console に送ります。あわせて、スマートフォンでの表示も確認しておくと安心です。

ほかの記事