Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
JavaScript Design Patterns

You're reading from   JavaScript Design Patterns Deliver fast and efficient production-grade JavaScript applications at scale

Arrow left icon
Product type Paperback
Published in Mar 2024
Publisher Packt
ISBN-13 9781804612279
Length 308 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Hugo Di Francesco Hugo Di Francesco
Author Profile Icon Hugo Di Francesco
Hugo Di Francesco
Arrow right icon
View More author details
Toc

Table of Contents (16) Chapters Close

Preface 1. Part 1:Design Patterns
2. Chapter 1: Working with Creational Design Patterns FREE CHAPTER 3. Chapter 2: Implementing Structural Design Patterns 4. Chapter 3: Leveraging Behavioral Design Patterns 5. Part 2:Architecture and UI Patterns
6. Chapter 4: Exploring Reactive View Library Patterns 7. Chapter 5: Rendering Strategies and Page Hydration 8. Chapter 6: Micro Frontends, Zones, and Islands Architectures 9. Part 3:Performance and Security Patterns
10. Chapter 7: Asynchronous Programming Performance Patterns 11. Chapter 8: Event-Driven Programming Patterns 12. Chapter 9: Maximizing Performance – Lazy Loading and Code Splitting 13. Chapter 10: Asset Loading Strategies and Executing Code off the Main Thread 14. Index 15. Other Books You May Enjoy

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 chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime