如何使用React / Next js网站的useEffect钩子来延迟加载映射组件

Question

[我在Next js网站的索引页上放置了Google Maps API组件，但它使负载降低了惊人的数量（大约500毫秒）。

我有没有办法使用useEffect挂钩或其他简洁方式将组件延迟到页面加载之后？

我想提高网站的加载速度（和性能得分）。

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>

  )
}

我在Next js网站的索引页上放置了Google Maps API组件，但它使负载降低了惊人的数量（例如500毫秒）。有没有办法让我延迟组件，直到...

Answer 1

Next.js提供了一个dynamic帮助器，仅在将其呈现到页面时才加载该组件。