How to control where in the DOM a <Script> renders

Unanswered

Pacific sandlance posted this in #help-forum

Pacific sandlanceOP

2025-03-10T12:13:04.823Z

I need to add a third party embed script to a page, and it's important that it renders in the DOM where it's placed in the code. Next.js wants to pull it either into the head, or the end of the body of the tag depending on the strategy.

I need it to stay in place where I put it. Is there any way to do this?

34 Replies

Pacific sandlanceOP

2025-03-10T12:38:20.207Z

If I use a regular <script> tag, I see the script is rendered in the DOM where I want it, but not executed.

Pacific sandlanceOP

2025-03-10T17:46:17.802Z

Bump

LuisLl

2025-03-10T23:40:35.245Z

Maybe the script did execute, but on the server for the initial page load.
I can think of dynamically importing the script and disabling SSR.

export const YourScript = dynamic(() => import('../your-route'), {
  ssr: false,
});

And then render <YourScript/> where you want, maybe this works. But not very sure if Next.js will still try to move it

@Pacific sandlance I need to add a third party embed script to a page, and it's important that it renders in the DOM where it's placed in the code. Next.js wants to pull it either into the head, or the end of the body of the tag depending on the strategy. I need it to stay in place where I put it. Is there any way to do this?

Losti!

2025-03-11T00:00:00.985Z

You can try this approach, the documentation details what facilities it gives you.

https://nextjs.org/docs/app/api-reference/components/script
https://nextjs.org/docs/app/building-your-application/optimizing/scripts
https://nextjs.org/docs/app/api-reference/config/next-config-js/crossOrigin

LuisLl

2025-03-11T00:04:17.869Z

That’s true what @Losti! should work, I thought you had already tried that approach and didn’t work for you.

Losti!

2025-03-11T00:07:07.298Z

I don't use it much, as my projects don't require it.

But it's good to remember that it exists and that it is a solution to embedding third-party scripts.

@Losti! You can try this approach, the documentation details what facilities it gives you. https://nextjs.org/docs/app/api-reference/components/script https://nextjs.org/docs/app/building-your-application/optimizing/scripts https://nextjs.org/docs/app/api-reference/config/next-config-js/crossOrigin

Losti!

2025-03-11T00:10:19.271Z

I noticed there were a couple of extra details in the documentation regarding its use, I added them to make them easier for you to access.

Pacific sandlanceOP

2025-03-11T10:53:53.902Z

Thanks both, but no that doesn't work.

I am of course using the <Script> tag, next.js will either move it to the head or end of the body tag.

Let me know if I'm missing anything, but I've read every bit of those docs many times.

@Pacific sandlance Let me know if I'm missing anything, but I've read every bit of those docs many times.

Losti!

2025-03-11T12:45:18.253Z

Can you show us the code or error you are having with the <Script> component?

Pacific sandlanceOP

2025-03-11T12:45:57.052Z

Literally using a <Script> tag anywhere. Regardless of which strategy is used, the resulting <script> tag is moved from where it is originally rendered.

This is an optimization by next.js because it assumes that location in the <body> tag shouldn't matter, but there are many third party scripts that will embed an iframe or div as a sibling to where its <script> is rendered.

So next.js either moves it to the head or the end of the body, depending on the strategy. Well, an iframe in the <head> is not what we want, and the iframe rendering at the very end of the <body> is also not what we want.

I need the <Script> to render in the DOM where I put it.

Losti!

2025-03-11T12:59:46.169Z

Ok, now I understand you better, what happens is that the <Script/> component as you have already seen does not respect the exact location where it is written in the JSX. It moves to the head or the body depending on the strategy and this affects third-party scripts if they show HTML elements.

But you can try something different like:

const ExampleComponent = () => {
  return (
  <div id="script-container" 
    dangerouslySetInnerHTML={{
      __html: `<script   src="https://terceros.com/script.js"></script>`
    }}>
  </div>
  )
}

import { useEffect, useRef } from 'react';

export default function MiComponente() {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://terceros.com/script.js';
    script.async = true;
    containerRef.current.appendChild(script);
  }, []);

  return <div ref={containerRef} />;
}