Next.js Discord

Discord Forum

Script only loading on first load

Unanswered
Phu Quoc Ridgeback posted this in #help-forum
Open in Discord
Phu Quoc RidgebackOP
Hello,
I'm trying to put codepen in my app using script tag (next script tag) but it only shows codepen embed on first load, if you change page and then go back it won't show it. I'm not using app dir. Thanks.

9 Replies

Knopper gall
Can't help without any information about usage or code examples

https://nextjs-forum.com/post/1138338531983491154
Phu Quoc RidgebackOP
        <div className="mt-2">
          <p
            className="codepen"
            data-height="400"
            data-default-tab="html,result"
            data-slug-hash="oNOMWYr"
            data-user="gmimjz"
          ></p>
        </div>
        <Script src="https://cpwebassets.codepen.io/assets/embed/ei.js" />

Sorry, that's the code that is used to load codepen embed into the page
It loads perfectly fine first time the page is loaded, and it doesnt work the second time page is loaded (it doesn't throw any errors in console)
Knopper gall
That doesn't tell me anything, can you show me the component please?
Phu Quoc RidgebackOP
No component, if you need to reproduce it, just create two pages, put this code on a page, change page with Link then go back to that page using Link, codepen won't show up
Sorry for late response
@Phu Quoc Ridgeback No component, if you need to reproduce it, just create two pages, put this code on a page, change page with `Link` then go back to that page using `Link`, codepen won't show up
Ray
<Script /> will only load the script as soon as you land on the page or reload it, after which the script gets cached and won't be reloaded while navigating between the pages.
Try using script tag instead or create the script element in a useEffect if you want to load an external script on page load
Chartreux
https://github.com/vercel/next.js/discussions/17919 this is similar issue there could be some solutions to try