next-issue.js

import React, {useState, useEffect} from "react"
import {useRouter} from 'next/router'

const Event = ({embed}) => {
    const router = useRouter()
    const [embedSRC, setEmbedSRC] = useState(embed);
    // useEffect(() => {
    //     const handleRouteChange = () => {
    //         setEmbedSRC(embed)
    //     }
    //     router.events.on('routeChangeStart', handleRouteChange)
    // }, []);
    const [isUnmounted, setIsUnmounted] = useState(false);

    useEffect(() => {
        setInitialSRC()
    }, []);

    const setInitialSRC = () => {
        setEmbedSRC(embed)
    }

    setTimeout(() => {
        console.log('booom!');
        setIsUnmounted(true);
        setEmbedSRC('https://app.infoweave.io/embed/uspa/ais/public/records/queryget?hierarchy_category_id=54&hierarchy_item_id=2&sub_hierarchy_item_id=8');
        setTimeout(() => {
            setIsUnmounted(false);
        }, 200);
    }, 8000);

    if (isUnmounted) {
        return (<div>Loading...</div>)
    }
    return (

        <ChildComponent embedSRC={embedSRC}/>
    )
}

export default Event;


const ChildComponent = (props) => {

    const setURL = () => {
        return {__html: `<script src=${props.embedSRC}></script>`}
    }

    return (
        <React.Fragment>
            {
                <div dangerouslySetInnerHTML={setURL()}/>
            }
        </React.Fragment>
    )
}

export async function getStaticProps() {

    let embed = 'https://app.infoweave.io/embed/uspa/ais/public/records/queryget?hierarchy_category_id=54&hierarchy_item_id=2&sub_hierarchy_item_id=3';
    return {
        props: {
            embed
        },
    };
}