Next.js script render-CodePudding

In my Next.js project I have a script that renders a widget as follows:

      <a
        className="e-widget no-button xdga generic-loader"
        href="https://example"
        rel="nofollow"
      >
        3 lucky winners stand a chance to win…
      </a>
      <Script
        type="text/javascript"
        src="https://widget.gleamjs.io/e.js"
        strategy="afterInteractive"
      ></Script>

The problem is that once this script executes on the initial render, it does not execute again later.

Anyone know how I can get the script to execute multiple times?

CodePudding user response：

The issue might be originating from other parts but you can give this a shot:

import React, { FC } from "react";
import Script from "next/script";

interface Props {
  id: string;
}

const Widget: FC<Props> = ({ id }) => {
  return (
    <>
      <a
        className="e-widget no-button xdga generic-loader"
        href="https://example"
        rel="nofollow"
      >
        3 lucky winners stand a chance to win…
      </a>
      <Script
        id={id}
        src="https://widget.gleamjs.io/e.js"
        strategy="afterInteractive"
      />
    </>
  );
};

export default Widget;

CodePudding user response：

I managed to solve the problem by forcing the parent component to re-mount, which then causes my Script tag to re execute/render as desired.