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 |
|
|
| Determine when the script should be load. See the Usage section below for more information. |
|
|
| 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
andlazyOnload
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