Next.js Discord

Discord Forum

loading two external scripts

Unanswered
Sweat bee posted this in #help-forum
Open in Discord
Sweat beeOP
hey I want to import two external scripts (Smartrecruiter) into my nextjs 13 app. The first script is just a common script and the second is for a widget that depends on the first script! How can I make sure the first script has been loaded before the second?

17 Replies

Sweat beeOP
here is an example how it looks like if you include it into html https://codepen.io/oothkoo/pen/KqwXZR
Sweat beeOP
I have finally managed to fit it into my next app but for some reason it only loads on the first time I visit the page... when I navigate somewhere else and go back its not showing anymore... anyone an idea what that could be?
West Highland White Terrier
Have you managed to find a solution for this, @Sweat bee ? I have the exact same situation.
Jboncz
How are you loading in the script?
In your base layout?
West Highland White Terrier
One of the scripts (the one I need to load first) is in my root layout:
<body>
<Script
          src="my-script.js"
          strategy="beforeInteractive"
        />
<body/>

The other one I'm loading inside the pages since it shouldn't load for all the segments:
<Script id="heap-script" strategy="afterInteractive">
      {`
        window.heap=some long script here;
      `}
    </Script>

The layout one should load an optimizely (https://support.optimizely.com/hc/en-us/articles/4410284311565-Optimizely-Web-Experimentation-JavaScript-snippet) script. The one in the pages should load a heap script (https://developers.heap.io/docs/web). I need to make sure the optimizely one loads first.
Jboncz
and what issue are you having?
It looks like beforeInteractive needs to be loaded on the layout.jsx/tsx

beforeInteractive scripts must be placed inside the root layout (app/layout.tsx) and are designed to load scripts that are needed by the entire site (i.e. the script will load when any page in the application has been loaded server-side).


Whereas afterInteractive can be placed in the layout or page.
Sweat beeOP
thats correct... beforeinteractive goes into head and has to be loaded in the root layout... all other scripts you can place everywhere but they always go into body... and thats kinda my issue... I need to load a base script which has all the stuff (mainly jquery stuff) but then there is a second script which has a function call that is called via innerhtml. That function call adds a div container with a table with job descriptions and a search input. I need to have that container inside my component though. But because it will append on the same level as where the script is loaded it will always put into the body, so its always at the end of my page instead inside my component... I probably have to move the container to the right place after the function has been executed... its an old script...
Jboncz
Oh boy, yeah that sounds.... annoying lol. Im sorry I have never worked with anything like that so im not sure.
Sweat beeOP
I cant get it to work...
if someone has an idea I would be very thankful
here is a codepen of said script: https://codepen.io/oothkoo/pen/KqwXZR
it works after a page reload but then when navigate somewhere else and back its gone
@Jboncz It looks like beforeInteractive needs to be loaded on the layout.jsx/tsx beforeInteractive scripts must be placed inside the root layout (app/layout.tsx) and are designed to load scripts that are needed by the entire site (i.e. the script will load when any page in the application has been loaded server-side). Whereas afterInteractive can be placed in the layout or page.
West Highland White Terrier
@Jboncz From what I can I see beforeInteractive script in the root lauout doesn't ensure it will load first.. It just ensures it will load before the first user interaction but it can still load after the script inside app.