<Script>

Controlling third-party script execution.

Next.js3 min readConcept 52 of 65

The <Script> Component

Modern websites rely on heavy third-party scripts for analytics, ads, and customer support widgets.

The Next.js <Script> component allows you to explicitly control *when* these scripts load and execute so they don't interfere with your core application code.

Main Thread Blocking

JavaScript is single-threaded. If a massive third-party analytics script starts parsing in the middle of your page load, the browser cannot render the UI or make your buttons interactive.

By pushing low-priority scripts to execute later, you ensure your app feels lightning fast to the user.

Execution Strategies

You pass a strategy prop to <Script>:

1. beforeInteractive: Use for critical scripts like bot detection or cookie consent. Executes before React hydrates.

2. afterInteractive (Default): Use for tag managers and analytics. Executes immediately after the page becomes interactive.

3. lazyOnload: Use for low-priority scripts like chat widgets or social media embeds. Waits until the browser is completely idle.

The Render Timeline

Watch how changing the Script strategy physically moves the heavy execution block across the browser's render timeline, freeing up the main thread.

layout.tsx
import Script from 'next/script';
<Script
src="https://intercom.com/widget.js"
strategy="
"
/>
0ms (Server HTML)Ready to simulateTime →
React Mounts
Hydration Starts
Browser Idle

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which `<Script>` strategy should you use for a heavy customer support chat widget?

Remember this

  • Standard <script> tags block the main thread and ruin performance.
  • Use <Script strategy="afterInteractive"> (the default) for analytics.
  • Use lazyOnload for heavy, non-critical scripts like chat widgets.
  • Use beforeInteractive sparingly, only for critical scripts like cookie consent.

Done with this concept?

Mark it complete to track your progress. No login needed.