KARTE Blocksではいくつかの技術的な工夫によって、サイトに訪れたユーザーに違和感を与えない自然なタイミングでのブロック更新を実現しています。
ここでは、KARTE Blocksで設定したブロックの更新がどのタイミングで実行されるのかについて、仕様を説明します。
ページ読み込み時の同期的なコンテンツ更新
Blocksタグ（builder.js）では、同期的なタグの読み込み方式を採用しています。
これによって、既存のページコンテンツの描画とほぼ同じタイミングでブロックの更新が行われるようになります。
同期処理と非同期処理の違い
同期処理をするタグと非同期処理をするタグの違いは、次の通りです。
- 「同期タグ」を利用したページコンテンツの更新
- ページ読み込み完了前にタグ内の処理が実行されるため、画面のチラつきが発生しにくい
- 「非同期タグ」を利用したページコンテンツの更新
- ページ読み込み完了後にタグ内の処理が実行されるため、画面のチラつきが発生する
同期処理によるリスク
一方、同期的にタグを読み込むことにより、サイト自体のレンダリングに影響を与える可能性があります。詳しくは、下記の記事をご覧ください。
ページ読み込み後にDOMが変更された場合のブロック更新
Blocksタグ（builder.js)では、ページ読み込み後のDOMの変更を監視し、DOM変更される度にブロックの更新が行われる、という仕様になっています。
これにより、SPAサイトなどページ読み込み後にDOMが変更されるようなサイトでも、ブロックの更新がルール通りに実行されるようになっています。
DOM変更時にブロックで更新される対象の要素は？
ページ読み込み時と同様、ページ読み込み後のDOM更新によって新たに追加された要素についても、オリジナルブロック登録時に指定したCSSセレクタに合致する要素があれば更新が行われます。
DOM変更の度にブロックが更新されることによるリスク
前述のように、オリジナルブロック登録時に指定したCSSセレクタに合致する要素については、ページ読み込み時だけではなく、ページ読み込み後のDOM変更時にも更新が行われます。
そのため、CSSセレクタの指定の仕方によっては、たまたまページ読み込み後のDOM変更によって追加された要素に合致してしまい、その部分が意図せず更新されてしまう可能性があります。
上記を踏まえ、本番配信前には「段階的な配信による検証」によって、十分に検証をしてください。
ブロックが更新されない場合
タグを埋め込むサイトをReactやNext.js等のシングルページアプリケーションフレームワークを用いて作成している場合、ページ遷移したのにも関わらずブロックが残り続けることがあります。
たとえば、Next.jsのlayout.jsをはじめとした、URLに関わらず共通で描画されるコンポーネントを使用している場所にブロックを設置すると、その部分が更新されず、URL条件にマッチしていないページに遷移した後に前のページのブロックが残り続けることがあります。
共通で描画される場所にはブロックを設置しないか、設置する場合は上記の点に留意して設置するようにしてください。
#karte_blocks