How to Fix a Script at the Top of the <head> Using React 19 Hoisting

#react

I'm working on a project using React 19 and leveraging its hoisting mechanism for managing title, meta tags, links, and async scripts during server-side rendering (SSR).

However, I’ve encountered a specific challenge:

Problem: I need to ensure that a specific element remains at the top of the , like this:

<html>
  <head>
    <script
      type="application/javascript"
      dangerouslySetInnerHTML={{ __html: 'window.CONFIG = ...' }}
    />
    {/* <!-- Hoisted elements should appear below this --> React 19's hoisting feature automatically moves all scripts, links, and meta elements to the top of the  */}
  </head>
</html>