Impossible to Server-Render Client Components in API Routes

[Titou325]

Link to the code that reproduces this issue

https://github.com/Titou325/dev-next-ssr

To Reproduce

1. Start the application
2. Go to http://localhost:3000/api
3. The server errors with 500

Current vs. Expected behavior

It seems that it is not possible to render "use client" components from API routes. We need to do this to create emails and documents that get sent to a third party.

In basic React, we can just render to readableStream and get the static HTML even for a "use client" component. However, this doesn't seem to work with Next.js, as the component seems to be passed as an empty object.

Server components work fine.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Thu Jun 20 00:25:05 PDT 2024; root:xnu-10063.140.29.0.1~15/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 20.12.2
  npm: 10.8.0
  Yarn: 1.22.17
  pnpm: 7.14.1
Relevant Packages:
  next: 15.0.0-canary.83 // Latest available version is detected (15.0.0-canary.83).
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local), next build (local), Vercel (Deployed)

Additional context

I have upgraded to Next canary but still encounter the same discrepancy, with either the react-dom APIs being patched by Next or the component being pre-processed.

While this demo shows something that could be achieved by a page directly, the idea is that we take the HTML string and send it to a third party (in our case fileforge.com)