Open2021/07/30にコメント追加3

Preactでnext/imageを使用すると、noscript内の画像が読み込まれてしまう

Next.js

Preact

でぃーすけ 2021/07/30

バージョン

Next.js 11.0.1
Preact 10.5.14

Preactを用いると、noscriptのレンダリングがReactと異なることが以下のissueで報告されている。

でぃーすけ 2021/07/30に更新

同じ issueに解決策が載っているので、それを試してみる。

でぃーすけ 2021/07/30

_app.tsx（_app.js,jsx）に書いていく。

_app.tsx

import { AppProps } from 'next/app'
import { options } from 'preact'

const CLIENT = typeof document !== 'undefined'
const old = options.vnode
options.vnode = (vnode) => {
  if (vnode.type === 'noscript' && CLIENT) {
    vnode.props.children = null
  }
  if (old) old(vnode)
}

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

JavaScriptありでの動作を確認する。

無事にnoscript内で画像が読み込まれないようになる。
(SSRで文字列としてレンダリングされ、ブラウザでHTMLとして読み込まれてしまう前に削除している模様)

JavaScriptなしでの動作を確認する。

noscript内の画像が読み込まれるようになる。

めでたし。