在 NextJS 中延遲加載基於 Javascript 的 iFrame

Question

我有一個 NextJS 網站。 我與視頻廣告合作伙伴合作，他們的廣告代碼如下所示：

<div><script type="text/javascript" language="javascript" src="https://example.com/view.php?s=12345&cbuster=[CACHE_BUSTER]&pubUrl=[PAGE_URL_ENCODED]&subId=[SUBID_ENCODED]" async></script></div>

這個view.php文件實際上會在任何嵌入的位置加載 iframe。 因此，如果我將其嵌入到側邊欄中，帶有視頻的 iframe 將顯示在側邊欄中。

在普通的 HTML 頁面上，它運行良好並且異步加載。 但是，在 NextJS 中，我無法讓它異步工作。 它總是同步加載，這會減慢我的網站頁面加載速度。

你能幫我用最好的方法在 NextJS 中異步加載這樣的腳本嗎？

謝謝！

Answer 1

我會使用類似afterinteractive策略的東西，即：

<>
  import Script from 'next/script'
  <Script
    src="https://example.com/view.php?s=12345&cbuster=[CACHE_BUSTER]&pubUrl=[PAGE_URL_ENCODED]&subId=[SUBID_ENCODED]"
    strategy="afterInteractive"
  />
</>;

https://nextjs.org/docs/api-reference/next/script