Overview

The Script component is an extension of the HTML <script> tag that allows you to control the loading priority of scripts.

Import

🚧 IMPORTANT

For local environment setup, make sure you are using Next.js 11.0.0 or later.

The Script component can be imported directly from the Frontend Components package, which is pre-installed in your Shogun Frontend store.

import { Script } from '@getshogun/frontend-components'

Props

name	type	default value	description
`strategy`	`beforeInteractive` \| `afterInteractive` \| `lazyOnload` \| `worker` \| `interaction`	`afterInteractive`	Determine when the script should be load. See the Usage section below for more information.
`onLoad`	`() => {}`		A function to be executed after the script is finished loading. See the Usage section below for more information.

📘 In addition to the props above, Script accepts any other DOM attribute you pass to it.

Basic usage

import React from 'react'
import { Script } from '@getshogun/frontend-components'

const Home = () => {
  return (
    <>
      <Script src="https://www.example.com/some-script.js" />
    </>
  )
}

export default Home

`strategy` usage

To control when the script should be loaded, use the strategy prop.

`beforeInteractive`

By using strategy="beforeInteractive" the script will be loaded before the page is fully loaded (interactive). Scripts using this approach are injected into the initial HTML markup from the server, and executed before the JavaScript bundle.

📘 This strategy should be used for any critical scripts that need to be fetched and executed before the page is interactive.

⚠️ Please avoid using this strategy for every script, as it will increase the time for the page to become interactive, causing a bad user experience.

import React from 'react'
import { Script } from '@getshogun/frontend-components'

const Home = () => {
  return (
    <>
      <Script
        src="https://www.example.com/some-script.js"
        strategy="beforeInteractive"
      />
    </>
  )
}

export default Home

`afterInteractive`

By using strategy="afterInteractive", the script will be loaded immediately after the page becomes interactive. This strategy is ideal for scripts that don't need to be loaded before the page is interactive, such as analytics scripts.

import React from 'react'
import { Script } from '@getshogun/frontend-components'

const Home = () => {
  return (
    <>
      <Script
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer', 'GTM-XXXXXX');
        `,
        }}
      />
    </>
  )
}

export default Home

`lazyOnload`

By using strategy="lazyOnload", the script will be loaded after all the page's resources have been fetched. This strategy is ideal for scripts that can be executed in the background, such as chat and social media widgets.

import React from 'react'
import { Script } from '@getshogun/frontend-components'

const Home = () => {
  return (
    <>
      <Script
        src="https://www.example.com/some-script.js"
        strategy="lazyOnload"
      />
    </>
  )
}

export default Home

`interaction`

By using strategy="interaction", the script will get added to the DOM under the following conditions:

After the first instance that the user has interacted on the page.
After the page hydrates.

This is expected to improve Lighthouse and core web vital scores. Recommended use-cases include pop-ups and cookie consent banners.

import React from 'react'
import { Script } from '@getshogun/frontend-components'

const Home = () => {
  return (
    <>
      <Script
        src="https://www.example.com/some-script.js"
        strategy="interaction"
      />
    </>
  )
}

export default Home

`onLoad` usage

The onLoad prop allow you to execute scripts after a script is fully fetched and loaded.

import React from 'react'
import { Script } from '@getshogun/frontend-components'

const Home = () => {
  const [state, setState] = useState(null)

  return (
    <>
      <Script
        src="https://www.example.com/some-script.js"
        onLoad={() => {
          setState({ hello: 'world' })
        }}
      />
    </>
  )
}

export default Home

Inline Scripts

🚧 Limitations

An id attribute must be defined.
Only the afterInteractive and lazyOnload strategies can be used.

You can inline scripts that aren't loaded from an external file:

import React from 'react'
import { Script } from '@getshogun/frontend-components'

const Home = () => {
  const [state, setState] = useState(null)

  return (
    <>
      <Script id="my-script" strategy="lazyOnload">
        {`document.getElementById('banner').classList.remove('hidden')`}
      </Script>
    </>
  )
}

export default Home

with `dangerouslySetInnerHTML`

It's also possible to use dangerouslySetInnerHTML to achieve the same as the previous example:

import React from 'react'
import { Script } from '@getshogun/frontend-components'

const Home = () => {
  const [state, setState] = useState(null)

  return (
    <>
      <Script
        id="my-script"
        strategy="lazyOnload"
        dangerouslySetInnerHTML={{
          __html: `document.getElementById('banner').classList.remove('hidden')`
        }}
      >
    </>
  )
}

export default Home