In this article I am going to show you, how you can import a component without server side randering in NextJS.

 

Very first, you need to import dynamic from 'react/dynamic'

import dynamic from 'react/dynamic'

 

Now, you can import any component using dynamic and here very important thing is that, you need to pass extra information ssr = false. Link this.

const componentName = dynamic(() => import("component-path"), { ssr: false });

 

I am going to show you a complete example.

Let's say my component name is programmingnet. Now I am going to import this component dynamically without server side rendering or ssr = false.

import dynamic from 'next/dynamic';
const programmingnet = dynamic(() => import("components/programmingnet"), { ssr: false });

export default function App() {
    return(
       <programmingnet />
    )
}

 

 

Thank You