Optimizing: Lazy Loading | Next.js

[magic cradle]

looks correct for the most part. did you check through https://pagespeed.web.dev/ or lighthouse plugin. if its formal, production might take hours to update all around the web, check through light house locally. also, try changing, LocationMapComponent to: ```
const LocationMapComponent = lazy(() =>
import('../locationmap/LocationMap.component')
);

[hollow hemlock]

Hey @magic cradle! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

---

Lazy loading in Next.js helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route. It allows you to defer loading of client components and imported libraries, and only include them in the client bundle when they're needed source (https://beta.nextjs.org/docs/optimizing/lazy-loading).

There are two ways you can implement lazy loading in Next.js:

1. Recommended: Using React.lazy() with Suspense (https://beta.reactjs.org/apis/react/Suspense). Please see the React documentation (https://beta.reactjs.org/apis/react/lazy) for examples.
2. Using Dynamic Imports (next/dynamic) (https://beta.nextjs.org/docs/optimizing/lazy-loading#nextdynamic) if you're migrating from pages to app.

Here's an example of using next/dynamic to import client components:

'use client'

import { useState } from 'react'
import dynamic from 'next/dynamic'

// Client Components:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })

export default function ClientComponentExample() {
  const [showMore, setShowMore] = useState(false)

  return (
    <div>
 {/* Load immediately, but in a separate client bundle */}
 <ComponentA/>

 {/* Load on demand, only when/if the condition is met */}
 {showMore && <ComponentB/>}
 <button onClick={() => setShowMore(!showMore)}>Toggle</button>

 {/* Load only on the client side */}
 <ComponentC/>
 </div>
  )

}

source (https://beta.nextjs.org/docs/optimizing/lazy-loading)

For images, you can use the next/image component with the loading attribute set to lazy (default behavior) to defer loading the image until it reaches a calculated distance from the viewport source (https://beta.nextjs.org/docs/api-reference/components/image).

loading = 'lazy'; // {lazy} | {eager}

Keep in mind that using eager is only recommended for advanced use cases, as it can hurt performance. Instead, consider using the priority (https://beta.nextjs.org/docs/api-reference/components/image#priority) property for early loading of images source (https://beta.nextjs.org/docs/api-reference/components/image).

@magic cradle kapa.ai is still learning and improving, please let us how it did by reacting below

[scarlet glen]

hey gm @magic cradle, thanks for your answer!

I checked with https://pagespeed.web.dev, my app is running on a docker container in a serverless service from Google, called Cloud Run. I understand that updates without taking hours because there's only one instance attending the requests.

Something that caught my attention is that my LocationMapComponent was lazy loaded into a component called LocationComponent (a server component with some static stuff ), and it is the LocationComponent the one that is rendered in my home page, almost at the end of the page. But lazy importing LocationMapComponent didn't show any improvement on performance, I had to lazy import the parent (LocationComponent) in my home page to see a slight improvement. Does that makes sense to you?