ライブ在庫を備えた静的サイト
高速なサイトが欲しい。同時に、正確な在庫状況も必要だ。 多くの人はどちらか一方を選びがちだ。スピードか、正確さか。しかし、その二択に迫られる必要はない。
静的サイトは高速だ。しかし、ビルドの合間にデータが古くなってしまう。 クライアントサイドでのフェッチは正確だが、ローディングスピナーが表示されてしまう。 スピナーはユーザー体験を損なう。
2つの「真実の層」を活用しよう。
レイヤー1は外部システム向け。
- GoogleやMetaにはビルド時のデータを使用する。
- これにより、売り切れ商品の広告表示を防げる。
- 同期スクリプトによって、このデータを最新に保つ。
レイヤー2は訪問者向け。
- ショップのグリッドを静的HTMLとしてレンダリングする。
- 商品は在庫ありであると仮定する。
- ページ読み込み後に、小さなスクリプトでUIをパッチする。
- これにより、売り切れ商品の購入ボタンを削除する。
このアプローチなら、ローディング状態を排除できる。ページは瞬時に表示される。 もしAPIが失敗しても、サイトは動作し続ける。ユーザーは閲覧し、カートに商品を追加できる。 もし商品が売り切れていれば、カート側でリクエストを拒否する。
空白の画面が表示されるよりは、カートでエラーが出る方がまだマシだ。
これはトラフィックの少ないショップに向いている。アート作品やニッチな商品に適している。 フラッシュセールには使用しないこと。高トラフィックな環境では、厳格なチェックが必要だ。