Loading JavaScript on element visibility and interaction

In this section, we’ll look at four different scenarios where dynamic or lazy loading of React components and JavaScript modules can be applied in the context of a Next.js application.

The first instance will be whether the component is in the component tree or not – in other words, whether it’s considered to be rendered or not. Next, we’ll look at dynamic imports based on user interaction. We’ll also cover how to handle an interaction that potentially requires a dynamic import of a JavaScript resource. Finally, we’ll show how to dynamically load a React component when an element is visible in the viewport.

Next.js provides a dynamic utility (see the documentation at https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) that allows us to lazily and dynamically load a React component.

In our case, we have a components/Hello.jsx component with a Hello...