Add onLoad gottcha note to next/script docs (#33097 )

Add a note to the onLoad section of the next/script documentation clarifying that onLoad will not run if `strategy="beforeInteractive"`. (That tripped me up for a bit so I thought I'd update the docs to save any one else the hassle :).)

Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>

2022-01-14 16:22:57 +00:00

2.4 KiB

Raw Blame History

description
Optimize loading of third-party scripts with the built-in Script component.

next/script

Examples

Version History

Version	Changes
`v11.0.0`	`next/script` introduced.

Note: This is API documentation for the Script Component. For a feature overview and usage information for scripts in Next.js, please see Script Optimization.

Optional Props

src

A path string specifying the URL of an external script. This can be either an absolute external URL or an internal path.

strategy

The loading strategy of the script.

`strategy`	Description
`beforeInteractive`	Load script before the page becomes interactive
`afterInteractive`	Load script immediately after the page becomes interactive
`lazyOnload`	Load script during browser idle time

onLoad

A method that returns additional JavaScript that should be executed after the script has finished loading.

Note: onLoad can't be used with the beforeInteractive loading strategy.

The following is an example of how to use the onLoad property:

import { useState } from 'react'
import Script from 'next/script'

export default function Home() {
  const [stripe, setStripe] = useState(null)

  return (
    <>
      <Script
        id="stripe-js"
        src="https://js.stripe.com/v3/"
        onLoad={() => {
          setStripe({ stripe: window.Stripe('pk_test_12345') })
        }}
      />
    </>
  )
}

2.4 KiB Raw Blame History

next/script

Optional Props

src

strategy

onLoad

2.4 KiB

Raw Blame History