Last active
July 21, 2022 08:07
-
-
Save takezoux2/4deda7e06b3f83839a7828775aacb03a to your computer and use it in GitHub Desktop.
Next.jsでLinkコンポーネントのPrefetchで画面遷移した際にも正常にATSが読み込まれるようにする
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Head from 'next/head'; | |
import Script from 'next/script'; | |
import React from 'react'; | |
// Scriptコンポーネントで定義すると、Prefetchされても重複でloadされなくなる | |
// dangerouslySetInnerHTMLは、描画のたびに実行されるため、通常Render時もPrefetch時でも呼び出される | |
const Advertisement: React.FC = () => { | |
// 表示のたびにIDが代わるようにする | |
const scriptId = "adreset" + new Date().getTime() | |
return ( | |
<> | |
<Script id="ats" src="//anymind360.com/js/{id}/ats.js" /> | |
<Script | |
id={scriptId} | |
dangerouslySetInnerHTML={{ | |
__html: ` | |
window.anymindTS && window.anymindTS.dispose && window.anymindTS.dispose(); | |
window.startAnymindTS && window.startAnymindTS(); | |
`, | |
}} | |
/> | |
<Head> | |
</Head> | |
</> | |
}; | |
}; | |
export default Advertisement; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment