← Page-Type Lab に戻る
中南米 · VTEX IO · React/SPA · vteximg · history.pushState ルート遷移

VTEX IO(React SPA) — SPA ルート遷移ごと再アタッチ必要

VTEX はラテンアメリカで圧倒的シェアの EC。VTEX IO は React ベースの SPA で、 アセットは vteximg。ルート遷移は history.pushState で行われ DOM が クライアント側でスワップされるため、widget は初回マウント後のルート遷移ごとに再アタッチが必要。 検証ポイント: pushState 遷移後も widget が DOM に残る/再マウントされること。

SPA ルート遷移シミュレータ

下のボタンで history.pushState によるルート遷移と、それに伴う setTimeout での DOM スワップ(React の再描画相当)を発火します。 スワップ後に widget host が残っているか/再アタッチが要るかを Observer で観測します。

Home — Vitrine

Ofertas do dia — produto(VTEX IO React コンポーネント)

解決策(理論調査の結論)

  • loader はルート遷移(pushState/popstate)を監視し、DOM スワップ後に widget を再アタッチ。
  • MutationObserver で view コンテナ差し替えを検知し、host が消えたら再マウント。