Lazy Scripts

App.tsx

import React, { FC, lazy, Suspense, useEffect, useState } from 'react'

const preloadComponent = () => import('./Component')

const Component = lazy(preloadDrawer)

const App: FC = () => {
  useEffect(() => {
    const handler = window.requestIdleCallback(preloadComponent)

    return () => window.cancelIdleCallback(handler)
  }, [])

  return (
    <Suspense fallback={() => <div>Loading...</div>}>
      <Component />
    </Suspense>
  )
}

export default App

gatsby-ssr.ts

import React from 'react'
import { GatsbySSR } from 'gatsby'

export const onRenderBody: GatsbySSR = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    React.createElement('script', {
      type: 'application/javascript',
      dangerouslySetInnerHTML: {
        __html: stripIndent`
          (function () {
            function registerScript () {
              YOUR_SCRIPT
            }
            if (document.readyState === 'complete') {
              window.requestIdleCallback(registerScript);
            } else {
              window.addEventListener("load", registerScript);
            }
          })();
        `,
      },
    }),
  ])
}