Rendering Server Component containing Next Image component to static html in route handler gives error

[charlesfrisbee]

I am trying to render a server component which contains the Next Image component to static html, and expose this on a route handler:

import Image from "next/image";

export const runtime = "edge";

export async function GET(req: Request) {
  const { renderToReadableStream } = (await import("react-dom/server")).default;
  const stream = await renderToReadableStream(
    <Image
      alt="pokemon"
      width="100"
      height="100"
      src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/132.png"
    />
  );

  return new Response(stream, {
    headers: { "content-type": "text/html" },
  });
}

As per the answer to #55135 I am able to get the rendered html of a server component (provided there is no Next Image component in the markup). In the presence of a component containing the Next Image component I get the following error:

[Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.]
 ⨯ node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js (9983:8) @ renderElement

I assume it has something to do with the client functionality of the Next Image component, but was wondering if there was a workaround or change needed in the output stream before passing it as a response

[icyJoseph]

Uhh I am not sure, I mean, you probably need to also include the JavaScript for the image, and such? sounds like the problem will just keep on growing.

Why not just make a grouped route, that escapes the root layout and just return the Image there? like app/(image-route)/my-image/page.tsx That'd do streaming by default right?

[charlesfrisbee]

Just for a bit of context/motivation I am building a skeleton ui generator as a proof of concept. So the idea was to first get the server-rendered html from above, and then using babel to parse/create an AST, traversing the nodes to replace them with skeleton elements. The latter works fine for most test cases I've thrown at it as it stands.

Your suggestion definitely works, but the output html is actually the page html which includes all the script tags etc which is a lot messier to work with than the plain html matching the input component's markup. I just assumed there would be an easy way to get the rendered img component