接下來.js提供了一個(gè)幫助程序，該幫助程序僅在組件呈現(xiàn)到頁面時(shí)加載該組件。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>
)
}
您還可以將函數(shù)的選項(xiàng)指定為第二個(gè)參數(shù)：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
});
如果要將組件的渲染延遲（并因此加載）到特定時(shí)間，那么是的，您可以使用效果或其他掛鉤來切換地圖渲染。例如：
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>
)
}
在實(shí)踐中，最好動(dòng)態(tài)加載隱藏在某種交互背后的組件，例如更改應(yīng)用程序中的選項(xiàng)卡以加載新路線，或單擊“查看地圖”按鈕。把它放在后面并不是很有成效，你只是人為地任意延遲組件的加載，而沒有真正考慮過。但是，我將其作為示例包含在內(nèi)，以展示動(dòng)態(tài)組件如何僅在它們應(yīng)該呈現(xiàn)時(shí)才加載。setTimeout
