Loading scripts inside route on client-side navigation

[arthurdenner]

Hi! 👋🏽

I have a nested route that should load a specific script.
I've noticed that when navigating to that route client-side, the script was added to the DOM but not loaded and executed.
Only when reloading the page, it was loaded and executed. I was using an inline script tag.

I'm not sure if this is the expected behaviour, hence I'm starting this discussion.
I've tried a few different approaches:

• Inline script tag
• script tag added with useEffect
• ExternalScripts from remix-utils (ref)
• script tag added conditional in the root route (ref)

From these, only the useEffect approach works as I expected (client-side navigation and page reload).
I've put up a repository with a simple but reproducible example (ref).

[tpiros]

Have you heard back from anyone on this @arthurdenner ?

[arthurdenner]

Unfortunately, no.

[tpiros]

let's hope someone will check this out as I've run into this issue and can confirm that useEffect seems to be the way to go.

My gut feeling is that it has to do with how they do the client-side navigation. I vaguely remember reading something about Remix doing some optimisation on CS navigation so it could be related to that.

[wizardlyhel]

Opinion from performance perspective: Having sub navigation trigger scripts reload/execution on a single page app isn't something we should expect.

Let's take google analytics script as an example:

On a normal html site, every navigation is a full page load. The google analytics script will be reloaded, and re-executed. This makes sense because the virtual JSDOM is blown away on every full page load.

On a single page app site (like remix), this no longer makes sense. There is no need to reload and re-execute google analytics script. It is the same script and the same code. We are wasting CPU cycles for a script that is already in the virtual JSDOM. We just need to execute the google analytic supplied api, gtag('event', 'screen_view'), every time a navigation happens.

I would consider what is this external script you are trying to use in the remix app. Does it have an api implementation path? If it doesn't, can you contact the developers of this external script to supply one so that single page apps can perform well.

If all else fails and that funky useEffect option kinda work, be it a reminder that it is a performance impact to your entire app and that is the trade-off that you have made to get this external script working.

And if you are an agency, make sure your customer understands such performance impact and sign for it.

[mikkpokk]

You compare things you cannot compare. Google Analytics is used on every page. So yes, it doesn't make sense to reload it on every page if it's loaded already.

You don't want to load heavy script on every route if app uses it only on one or two specific routes. It impacts page speed in general and page speed score. Tests will suggest you basically waste client's network that way. And loading and running script wastes client's CPU as well (even if the most functionality is on idle).

Moreover, sometimes you need to load specific script when user is signed in (let's say chat integration with user profile data). Signing in as an user doesn't mean hard reload/redirect.

[wizardlyhel]

No. I just saying be smart about the scripts you are bringing into your app. Here is an example script loading on route specific hook that we use in Hydrogen: https://github.com/Shopify/hydrogen/blob/2023-04/packages/hydrogen-react/src/load-script.tsx and the example of how we use it https://github.com/Shopify/hydrogen/blob/main/packages/hydrogen-react/src/ShopPayButton.tsx#L68

• It only creates a script tag when it doesn't find a script tag of the same source (This can be route specific or even component dependent)
• It has a script state so that you can prevent race condition when executing codes that relies on the script being ready

With the proper script loading setup, you can load Google map in your app if you want.

[eeerrrttty]

guys, really ? useEffect DOESN'T WORK.

Tried to insert the facebook pixels of my checkout and... puff... nothing.

[mattf96s]

Maybe this method from remix-utils can help?

[bradnowakIC]

How do you access the external scripts after using that method @mattf96s? I need to set some options up in paddle but can't get access to the imported script.

[sergiodxa]

Because the external script is setting something globally, and TS doesn't know about that, you will have to tell TS what Paddle is by defining the type yourself.

[constantinehuzenko]

@sergiodxa somehow ExternalScripts doesn't work for me

I'm adding ExternalScripts:

    <>
      <Header/>
      <Outlet />
      <Footer />
      <ScrollRestoration />
      <Scripts />
      <ExternalScripts />
    </>
  );

as well as

export const handle: ExternalScriptsFunction = () => [
{
  src: '...',
  type: 'text/javascript',
  charset: 'UTF-8',
  crossOrigin: 'anonymous',
},
];

and it don't work, I tried to call handle as scripts didn't work either, how can I test that it works at all?

[stormont]

The response from @wizardlyhel worked well for me after a lot of struggling with inconsistent loading from ExternalScripts from remix-utils. I "borrowed" her load-script.tsx and the useLoadScript() hook.

The end result was a lot of simplified code in my component. I ended up with just:

  const loadingStatus = useLoadScript('{MY_SCRIPT_URL}');

  useEffect(() => {
    if (loadingStatus !== 'done')
      return;
    doPostLoading();
  }, [loadingStatus]);