如何使用 React/Next js 站点的 useEffect 挂钩延迟加载地图组件

Question

我在我的 Next js 站点的索引页面上放置了一个 Google 地图 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>

  )
}

Answer 1

Next.js 提供了一个 dynamic 助手，它只会在组件呈现到页面时加载它。

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

import dynamic from 'next/dynamic'

const Map = dynamic(() => import('components/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>
  )
}

您还可以将 dynamic 函数的选项指定为第二个参数：

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

如果您想延迟渲染（并因此加载）您的组件直到特定时间，那么是的，您可以使用效果或其他挂钩来切换渲染地图。例如：

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>
  )
}

实际上，最好动态加载隐藏在某种交互后面的组件，例如更改应用程序中的选项卡以加载新路线，或单击“查看地图”按钮。把它放在 setTimeout 后面不是很有效率，你只是在没有真正考虑清楚的情况下人为地任意延迟组件的加载。但是，我将它作为示例包含在内，以展示动态组件如何只在它们应该呈现时加载。

如何使用 React/Next js 站点的 useEffect 挂钩延迟加载地图组件

How to lazy load map component using useEffect hook for React/Next js site

javascript

lazy-loading

reactjs

next.js