<Script> Component

The Blitz.js Script component enables developers to set the loading priority of third-party scripts to save developer time and improve loading performance.

Websites often need third parties for things like analytics, ads, customer support widgets, and consent management. However, these scripts tend to be heavy on loading performance and can drag down the user experience. Developers often struggle to decide where to place them in an application for optimal loading.

With <Script>, you can define the strategy property and Blitz.js will optimize loading for the script:

beforeInteractive: For critical scripts that need to be fetched and executed before the page is interactive, such as bot detection and consent management. These scripts are injected into the initial HTML from the server and run before self-bundled JavaScript is executed.
afterInteractive (default): For scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration.
lazyOnload For scripts that can wait to load during idle time, such as chat support and social media widgets.

Note: These loading strategies work the same for inline scripts wrapped with <Script>. See the inline scripts example below.

Usage

Previously, you needed to define script tags inside the Head of your Blitz.js page.

// Before

// pages/index.js
import { Head } from "blitz"

function Home() {
  return (
    <>
      <Head>
        <script
          async
          src="https://www.google-analytics.com/analytics.js"
        />
      </Head>
    </>
  )
}

With <Script>, you no longer need to wrap scripts in <Head>. Further, <Script> should not be used in pages/_document.js as <Script> has client-side functionality to ensure loading order. For example:

// After

// pages/index.js
import { Script } from "blitz"

function Home() {
  return (
    <>
      <Script src="https://www.google-analytics.com/analytics.js" />
    </>
  )
}

Examples

Loading Polyfills

import { Script } from "blitz"
;<Script
  src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"
  strategy="beforeInteractive"
/>

Lazy-Loading

import { Script } from "blitz"
;<Script
  src="https://connect.facebook.net/en_US/sdk.js"
  strategy="lazyOnload"
/>

Executing Code After Loading (`onLoad`)

import { Script } from "blitz"
;<Script
  id="stripe-js"
  src="https://js.stripe.com/v3/"
  onLoad={() => {
    this.setState({ stripe: window.Stripe("pk_test_12345") })
  }}
/>

Inline Scripts

import {Script} from 'blitz'

<Script strategy="lazyOnload">
  {`document.getElementById('banner').removeClass('hidden')`}
</Script>

// or

<Script
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').removeClass('hidden')`
  }}
/>

Forwarding Attributes

import { Script } from "blitz"
;<Script
  src="https://www.google-analytics.com/analytics.js"
  id="analytics"
  nonce="XUENAJFW"
  data-test="analytics"
/>