next/script

thrid-partyのjs読み込みの最適化

例として挙げてる例がなんのことかわからない

strategy

beforeInteractive

pageがinteractiveになる前にfetchして実行する

ボットの検出やconsent managemenなど

SSRで生成するHTMLのheadにscriptタグを挿入する

client側では読み込まれない

self bundleされたJSの実行よりも前に読み込まれる

afterInteractive

default

pageがinteractiveになったあとにfetchして実行

タグマネージャーや分析など

lazyOnload

idle時間中にloadを待機する

チャットサポートやソーシャルメディアウィジェットなど

onload

そのscriptの読み込み後に実行するcallback

具体的な実装としてどう違うのか

OGPの読み込みとかはどれ？

例

code:js

import Script from 'next/script';

<Script

src={url} // consent mangagement

strategy="beforeInteractive"

onLoad={() => {

// If loaded successfully, then you can load other scripts in sequence

}}

/>

実装箇所

参考