如何使用 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>

  )
}

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

在实践中，最好动态加载隐藏在某种交互后面的组件，例如更改应用程序中的选项卡以加载新路线，或单击“查看地图”按钮。将其放在 a 后面setTimeout并不是很有效率，而且您只是人为地任意延迟组件的加载，而没有真正考虑清楚。但是，我将其作为示例来展示动态组件如何仅在应该渲染时加载。