Script component for third-party scripts in NextJS - Step-by-Step Execution

Concept Flow - Script component for third-party scripts

Start Next.js Page

↓

Import Script Component

↓

Add <Script> with src and strategy

↓

Next.js Loads Script Based on Strategy

↓

Script Executes in Browser

↓

Page Renders with Script Effects

This flow shows how Next.js loads and runs third-party scripts using the Script component with different loading strategies.

Execution Sample

NextJS

import Script from 'next/script';

export default function Page() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="lazyOnload" />
      <div>Hello World</div>
    </>
  );
}

This code loads a third-party script lazily after the page loads, then renders a simple message.

Execution Table

Step	Action	Script State	Page Render State	Notes
1	Page starts rendering	Not loaded	No DOM yet	Initial render begins
2	Script component parsed	Not loaded	Preparing DOM	Script tag added with lazyOnload
3	Page DOM mounts	Not loaded	<div>Hello World</div>	Page content visible, script not loaded yet
4	Browser idle after load	Loading script	<div>Hello World</div>	Script starts loading lazily
5	Script loaded and executed	Loaded & executed	<div>Hello World</div>	Script effects available now
6	Page fully interactive	Loaded & executed	<div>Hello World</div>	User can interact with page and script

💡 Script loaded lazily after page load, page rendered immediately with content.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
scriptState	Not loaded	Not loaded	Loaded & executed	Loaded & executed
pageRenderState	No DOM	<div>Hello World</div>	<div>Hello World</div>	<div>Hello World</div>

Key Moments - 2 Insights

Why does the page content appear before the script loads?

Because the script uses strategy="lazyOnload", Next.js renders the page immediately and loads the script only after the page is fully loaded (see execution_table step 3 and 4).

What happens if we change strategy to "beforeInteractive"?

The script loads and executes before the page becomes interactive, delaying page interactivity but ensuring script is ready early (not shown in this trace but changes scriptState timing).

Visual Quiz - 3 Questions

Look at the execution table, at which step does the script start loading?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Check the 'Script State' column in execution_table rows for when loading begins.

According to variable_tracker, what is the pageRenderState after step 3?

A <div>Hello World</div>

B Script loaded

C No DOM yet

D Page fully interactive

💡 Hint

Look at the 'pageRenderState' row and the 'After Step 3' column.

If we remove the Script component, how would the execution_table change?

A Script would load immediately

B Page would not render

C Script State would remain 'Not loaded' throughout

D Page would show an error

💡 Hint

Without Script, no script loading steps appear; see scriptState in variable_tracker.

Concept Snapshot

Next.js Script component loads third-party scripts.
Use 'src' for script URL.
Use 'strategy' to control loading time:
- 'beforeInteractive': load early,
- 'lazyOnload': load after page load.
Page renders immediately; script loads per strategy.

Full Transcript

This visual trace shows how Next.js uses the Script component to load third-party scripts. The page starts rendering and adds the Script tag with a lazyOnload strategy. The page content appears immediately while the script loads after the page finishes loading. The script state changes from not loaded to loaded and executed after the browser is idle. Variables track script loading and page rendering states. Key moments clarify why the page shows content before the script loads and how changing strategy affects timing. Quiz questions test understanding of script loading steps and page rendering states.