Optimizing Next.js app | Dynamic Imports in next.js
Thu Dec 30 2021
- D. K. Dhabale
Code Snippet
import dynamic from "next/dynamic";//Replace with your component's addressconst Post = dynamic(() => import("../components/Post"));function myPage(){return (<><Post/><h1>Page content</h1></>)}
This will decrease your page load time.
Note: Any component that covers major screen space should not be dynamically loaded,
Dynamic loading causes the js bundle to be sent in pieces (multiple requests).
Using it with Major components will adversely affect the user experience.