Reader small image

You're reading from  JavaScript Design Patterns

Product typeBook
Published inMar 2024
Reading LevelIntermediate
PublisherPackt
ISBN-139781804612279
Edition1st Edition
Languages
Right arrow
Author (1)
Hugo Di Francesco
Hugo Di Francesco
author image
Hugo Di Francesco

Hugo Di Francesco is a software engineer who has worked extensively with JavaScript. He holds a MEng degree in mathematical computation from University College London (UCL). He has used JavaScript across the stack to create scalable and performant platforms at companies such as Canon and Elsevier and in industries such as print on demand and mindfulness. He is currently tackling problems in the travel industry at Eurostar with Node.js, TypeScript, React, and Kubernetes while running the eponymous Code with Hugo website. Outside of work, he is an international fencer, in the pursuit of which he trains and competes across the globe.
Read more about Hugo Di Francesco

Right arrow

Using Next.js Script’s strategy option to optimize asset loading

The Next.js Script component gives us more control over script loading behavior, allowing us to improve page load performance.

The strategy prop allows us to control the loading strategy; it defaults to afterInteractive, which will begin loading after some of the Next.js code has run. It can be set to beforeInteractive, in which case the script is loaded and executed before all Next.js code. lazyOnLoad can be used for lower-priority scripts to delay loading until there’s browser idle time.

The final option is experimental; it’s the worker strategy, which will load and run the script in a web worker.

Per the Next.js docs for the Script#strategy option, the following list contains the loading strategies of the script (see the docs: https://nextjs.org/docs/pages/api-reference/components/script#strategy).

There are four different strategies that can be used:

  • beforeInteractive: Load...
lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
JavaScript Design Patterns
Published in: Mar 2024Publisher: PacktISBN-13: 9781804612279

Author (1)

author image
Hugo Di Francesco

Hugo Di Francesco is a software engineer who has worked extensively with JavaScript. He holds a MEng degree in mathematical computation from University College London (UCL). He has used JavaScript across the stack to create scalable and performant platforms at companies such as Canon and Elsevier and in industries such as print on demand and mindfulness. He is currently tackling problems in the travel industry at Eurostar with Node.js, TypeScript, React, and Kubernetes while running the eponymous Code with Hugo website. Outside of work, he is an international fencer, in the pursuit of which he trains and competes across the globe.
Read more about Hugo Di Francesco