SPAの課題を見る
完成した fleama を、ブラウザの目で見る
React実践で作った fleama は、ブラウザで開けばきちんと動きます。商品が並び、詳細が開き、カートに入ります。ここまでは何も問題がありません。
ところが、ブラウザで右クリックして「ページのソースを表示」を選ぶと、様子が変わります。商品名も価格も、どこにも出てきません。出てくるのはこれだけです。
<body>
<div id="root"></div>
<script src="/assets/index-a1b2c3.js"></script>
</body>最初に届くのは空っぽの箱
React のアプリは、サーバーから空の HTML を受け取り、そのあと JavaScript が動いて画面を組み立てます。これを SPA と呼びます。Single Page Application の略で、ページを移っても HTML を取り直さない作りのことです。
画面が出るまでの順番は次のとおりです。
- 空の HTML が届く
- JavaScript のファイルをダウンロードする
- JavaScript が動いて、API から商品を取りに行く
- 商品が返ってきて、ようやく画面に出る
4 段階あるので、回線が細い端末では最初の1〜2秒、白い画面が続きます。
困るのは2つ
初期表示が遅いこと。 ユーザーが最初に見るのは真っ白な画面です。表示が1秒遅れるごとに離脱が増えることは、いろいろな計測で知られています。
検索エンジンに中身が伝わりにくいこと。 検索エンジンのクローラーは、まず HTML を読みます。その HTML に商品名が1つも書かれていなければ、「スニーカー 中古」で検索した人に fleama を出す理由がありません。SNS にリンクを貼ったときのカード表示も同じで、HTML の中の情報を読んで作られます。
fleama は売り買いのアプリです。検索から人が来ないフリマアプリは、商品があっても誰にも見つかりません。
演習
いまの fleama が最初に返している HTML の中身と、そこから起きる2つの困りごとを、画面に書き出してください。