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>
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)