DEV Community

Fernando Ferreira
Fernando Ferreira

Posted on

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

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>
Enter fullscreen mode Exit fullscreen mode

Question

Is there a way to mark this specific script as fixed, ensuring that React 19 hoists everything below it?

For context, I’m using SSR with React Router (Remix). Any insights?

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs