External scripts

Use Next's <Script /> component at the top of your MDX document to load external scripts. This page has tf (opens in a new tab) and tfvis (opens in a new tab) loaded in the console. Navigate to a different page and refresh to unload them.

import Script from 'next/script'
 
<Script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs" strategy="lazyOnload" />
<Script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis" strategy="lazyOnload" />

If your React components depend on a script being loaded, then use the beforeInteractive strategy. The default afterInteractive strategy loads immediately after hydration.

The lazyOnload strategy appears to be the same as Astro (opens in a new tab)'s client:idle directive.