How to both dynamically import and render a component on button click in nextjs?

Question

I know that there are several nextjs and reactjs questions out there in this topic but I think this is specific enough to get an own thread. So I have a NextJS project where I want a button to disappear on click and then import a component dynamically and render it.

It is crucial to import the component dynamically because of 2 things.

because we work with a library in the component which relies on 'window'
because the component affects load time and we only need it when the 'init button' is clicked

Here is my index.js code so far:

import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import dynamic from "next/dynamic"
import React, { useEffect, useState } from "react";

import { Inter } from "@next/font/google";

const inter = Inter({ subsets: ["latin"] });


export default function Home() {

    return (
      <>
        <Head>
          <title>My page</title>
          <meta
            name='description'
            content="Some desc. content"
          />
          <meta name='viewport' content='width=device-width, initial-scale=1' />
          <link rel='icon' href='/favicon.ico' />
        </Head>
        <button onClick={initSurvey()}>Initialize!</button>
        
      </>
    )
    }

  function initSurvey(){
    console.log("The button is working!")
    const Survey = dynamic(() => import("../components/SurveyComponent"), {
      ssr: false,
    })
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Please keep in mind this is not all I could do I just cleaned up the failed attempts to deliver you a clean, readable and understandable snippet.

Thank you in advance!

JulesMG · Accepted Answer · 2023-01-30 17:44:09Z

3

By checking the React.lazy documentation and this guide, I managed to get to this solution:

import { lazy, Suspense, useState } from "react";

const dynamicComponent = lazy(() => import('../components/MyDynamicComponent');

export default function Home() {

   const [dynComp, setDynComp] = useState(<div/>);

   const loadDynamicComponent = () => {

      return (
         <Suspense fallback={<div>Loading...</div>}>
            <dynamicComponent/>
         </Suspense>
      )
   }

   return (
      <>
         <button onClick={ () => setDynComp(<div>{loadDynamicComponent()}</div>)}>Initialize!</button>
         { dynState }
      </>
   );

}

Test it and let me know if it helps you!

edited Jan 30, 2023 at 17:44

answered Jan 30, 2023 at 16:57

JulesMG

2482 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rigozsolt01 Over a year ago

The method of dynamic import is not an issue. I would like to initiate this import on a button click. Can you help me with it?

JulesMG Over a year ago

@rigozsolt01 I've updated my answer with some code sugestion. See if it helps.

rigozsolt01 Over a year ago

It helped. Sort of. :D I read further the NEXT.JS documentation and modified your code. Now it works.

Collectives™ on Stack Overflow

How to both dynamically import and render a component on button click in nextjs?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related