Next Link使用時にlazysizesでの画像更新ができない場合の対応方法
先日、lazysizesで画像を遅延読み込みさせる対応を行ったが、next/linkを使ってページ遷移をせずに動的にページ内のコンテンツを書き換えている場合に画像が更新されない現象が発生した。
調べてみるとlazysizes attribute changeという公式プラグインが用意されていたのでこれを使って解決できた。
先日、lazysizesで画像を遅延読み込みさせる対応を行ったが、next/linkを使ってページ遷移をせずに動的にページ内のコンテンツを書き換えている場合に画像が更新されない現象が発生した。
調べてみるとlazysizes attribute changeという公式プラグインが用意されていたのでこれを使って解決できた。
jsの場合、複合処理を独自実装する必要がある
cookieの__next_preview_dataキーで判定
手軽にアップグレードできた
react-helmetをreact-helmet-asyncに切り替えた
「Ctrl + Shift + P」でコマンドパレットを開いて「Reload Window」を実行
NetworkFirstをhandlerに設定した