本機能はβ版となります。動作しない可能性や、今後予告なく仕様変更が行われる場合がありますので予めご了承ください。

Next.js, Nuxt.jsなど、Vue/Reactのフレームワークで構築されているサイトの場合、基本的にはハイドレーション（hydration）という処理が備わっています。このハイドレーションの処理によって、Blocksでの書き換え後がうまく動作しない場合があります。

その際、以下のように強制的にイベントを発生させることで、そのイベントの発生をトリガーに書き換えを行うことができるようになります。

document.dispatchEvent(new Event('karte-blocks-force-activate'));

サンプルコード

以下はサンプルコードになりますので、そのままコピー＆ペーストしても動作しない場合があります。予めご了承ください。

Next.js

※React Hookが利用できる(React 16.8以降から利用可能)前提になります。

_app.tsx内で以下のように記述します。

function MyApp({ Component, pageProps, router }: AppProps) {

  useEffect(() => {
    document.dispatchEvent(new Event('karte-blocks-force-activate'))
  },[router.pathname])

 return <Component {...pageProps} />
}

React Hookが利用できないかつNext.jsではない場合

componentDidMount()内に以下のように記述します。

componentDidMount() {
  document.dispatchEvent(new Event('karte-blocks-force-activate'))
}

参考

• Server-Side Rendering (SSR)
• ReactDOM