onLoad callback to run code after scripts are ready.1import Script from 'next/script';23export default function RootLayout({4children,5}: {6children: React.ReactNode;7}) {8return (9<html>10<body>11{children}12{/* Analytics - load after page is interactive */}13// !mark14<Script15src="https://analytics.example.com/script.js"16strategy="afterInteractive"17/>18{/* Low-priority widget */}19// !mark20<Script21src="https://widget.example.com/embed.js"22strategy="lazyOnload"23/>24</body>25</html>26);27}
| Strategy | When It Loads | Best For |
|---|---|---|
beforeInteractive | Before hydration | Consent managers, bot detection |
afterInteractive | After hydration | Analytics, tag managers |
lazyOnload | During browser idle | Chat widgets, social embeds |
worker | In a web worker | Heavy scripts that can run off-thread |
Choose the latest possible timing that meets your business needs.
| Topic | Guidance |
|---|---|
| Performance | Delay scripts that are not critical for initial render |
| User experience | Never block interactivity for non-essential scripts |
| Security | Audit third-party scripts regularly |
| Monitoring | Track script impact on Core Web Vitals |
beforeInteractive unless absolutely necessary - it blocks hydration.lazyOnload for scripts that users may never interact with.beforeInteractiveBefore hydration. Critical scripts only.
afterInteractiveAfter hydration. Most scripts use this.
lazyOnloadBrowser idle time. Chat widgets, etc.
workerWeb worker. Experimental.