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.2.0: Fri Dec  6 19:02:12 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T6031
  Available memory (MB): 36864
  Available CPU cores: 14
Binaries:
  Node: 20.17.0
  npm: 11.0.0
  Yarn: N/A
  pnpm: 9.15.4
Relevant Packages:
  next: 15.1.6 // Latest available version is detected (15.1.6).
  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