Optimizing Next.js app | Dynamic Imports in next.js

Thu Dec 30 2021

- D. K. Dhabale

Cover Image

Code Snippet

import dynamic from "next/dynamic";
//Replace with your component's address
const 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.