Duplicated script tags when using the new React 19 style tag

[brijeshb42]

Link to the code that reproduces this issue

https://github.com/brijeshb42/nextjs-inline-style-tag

To Reproduce

Next.js repro - https://github.com/brijeshb42/nextjs-inline-style-tag
Tanstack start repro - https://github.com/brijeshb42/tanstack-start-inline-style-tag

1. Build the application using npm run build (both the apps)
2. Then start the preview of the built app using
3. For Next.js - cd out && npx serve
4. For Tanstack - npm run start
5. Open each app and observe the HTML size.
6. Next.js has script tags at the bottom and all the alternate tags contain the same css content as used in Button.tsx (through JS objects).
7. Tanstack Start doesn't have the same thing. It only has the style tag that has the css content and it's not duplicated through extraneous style tags.

Current vs. Expected behavior

Current Behavior: The HTML size keeps on increasing as the usage of a component that renders inline style tag increases (even when the style tag has href and precedence props).

Expected Behavior: The HTML size should not increase (as significantly) with increase in the repetitive usage of the same component that renders the style tag.

For the same content, html size for Next.js was 131kB and 97.3kB for Tanstack start (when rendering 1000 Button components). Similary, when rendering 20k Buttons, the html size for Tanstack Start was 1.6mB and whopping 312mB for Next.js. 20k buttons only worked with export mode output. When doing the same without output: 'export' and then building and starting the server with npm run start, it could not render the page and threw

FATAL ERROR: invalid table size Allocation failed - JavaScript heap out of memory

Provide environment information

Node.js v20.17.0

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:23 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6031
  Available memory (MB): 36864
  Available CPU cores: 14
Binaries:
  Node: 20.17.0
  npm: 11.0.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.2.0-canary.40 // Latest available version is detected (15.2.0-canary.40).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: export

Which area(s) are affected? (Select all that apply)

CSS, Payload Size

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

We (team at @mui) were exploring a styling engine for one of our component libraries and we were trying to use the new <style> tags introduced in React 19 to render css without users requiring to import the CSS.
We came across this issue of duplicated css content across the script tags at the end. We also tried the same thing with Tanstack Start and Waku.
Only Tanstack Start had the expected behavior of having only a style tag in the head with the CSS and no script tag with the css content.

This will be a blocker for us on deciding to use inline style tags for css given the popularity of Next.js

[samcx]

@brijeshb42 Thank you for submitting an issue!

Taking a look—

Edit: writing up a response—

[samcx]

The reason for the duplicated <script> tags is explained thoroughly here → #42170 (comment) (tl;dr, it's because RSC).

Today, the React behavior that handles the ReactDOM.preload style API calls (preloading, hoisting, and deduping) does not apply for elements. This behavior only applies for ReactDOM.preload style API calls, and unfortunately React does not have a similar imperative API for inlined style rules. This isn't necessarily intentional—the primary element-based use case is to have an external stylesheet, which generally isn't unbounded in size, whereas inline style rules can be. It may be possible to extend this React behavior to elements in the future.

What you can do here is separate out your <style> tag, if you expect the styles to be static. React will be able to dedupe the style content when separated like this.

...
const styleTag = (
  <style href="button" precedence="components">
    {CSS}
  </style>
)

const Button = React.forwardRef<
  HTMLButtonElement,
  React.JSX.IntrinsicElements["button"]
>(({ className, ...rest }, forwardedRef) => {
  return (
    <>
      {styleTag}
      <button
        {...rest}
        ref={forwardedRef}
        className={`reset Button variant-filled color-primary ${
          className ?? ""
        }`}
      />
    </>
  );
});

Button.displayName = "Button";
...

This results in an HTML size of 14.4 kB instead of 131 kB.

Let me know if you have any further questions or concerns!