I placed a Google Maps API ponent on the index page of my Next js site but it's slowing down the load by a crazy amount (something like 500ms).

Is there a way for me to delay the ponent until after page load using the useEffect hook or in another concise way?

I want to increase the loading speed (and performance score) of the site.

export default function Home() {
  return (

    <div className={styles.main}>
      <Layout>
        <main className={styles.content}> 

          **<div className={styles.mapContainer}>
            <Map  className={styles.map}/>**

          </div>
        </main>
      </Layout>
    </div>

  )
}

I placed a Google Maps API ponent on the index page of my Next js site but it's slowing down the load by a crazy amount (something like 500ms).

Is there a way for me to delay the ponent until after page load using the useEffect hook or in another concise way?

I want to increase the loading speed (and performance score) of the site.

export default function Home() {
  return (

    <div className={styles.main}>
      <Layout>
        <main className={styles.content}> 

          **<div className={styles.mapContainer}>
            <Map  className={styles.map}/>**

          </div>
        </main>
      </Layout>
    </div>

  )
}

• javascript
• reactjs
• lazy-loading
• next.js

1 Answer 1

Next.js provides a dynamic helper that will only load the ponent when it would render to the page.

https://nextjs/docs/advanced-features/dynamic-import

import dynamic from 'next/dynamic'

const Map = dynamic(() => import('ponents/MapOrWhatever'));

export default function Home() {
  return (
    <div className={styles.main}>
      <Layout>
        <main className={styles.content}> 
          <div className={styles.mapContainer}>
            <Map  className={styles.map}/>
          </div>
        </main>
      </Layout>
    </div>
  )
}

You can also specify options for the dynamic function as the second argument:

const Map = dynamic(() => import('ponents/MapOrWhatever'), {
    ssr: false, // do not render this on the server side render
    loading: () => <div>Loading Map...</div>, // placeholder ponent
});

If you want to delay rendering (and therefore loading) your ponent until a specific time, then yes, you could use an effect or other hook to toggle rendering the map. As an example:

export default function Home() {
  const [showMap, setShowMap] = React.useState(false);

  React.useEffect(() => {
    // Set the map to load 2 seconds after first render
    const timeOut = setTimeout(() => setShowMap(true), 2000);

    return () => clearTimeout(timeOut);
  }, []);

  // <Map> will only load when showMap is true
  return (
    <div className={styles.main}>
      <Layout>
        <main className={styles.content}> 
          {showMap && <div className={styles.mapContainer}>
            <Map  className={styles.map}/>
          </div>}
        </main>
      </Layout>
    </div>
  )
}

In practice, it's better to dynamically load ponents that are hidden behind some kind of interaction, like changing tabs in the app to load a new route, or clicking a "View Map" button. Putting it behind a setTimeout isn't very productive and you're just artificially delaying the loading of ponents arbitrarily without really thinking it through. But, I've included it as an example to show how dynamic ponents only load once they should render.