reactjs - Hur använder jag doctype och html-taggar i en React-komponent?

Jag försöker göra SSR med Bun och jag vill ha en Layout-komponent som jag använder som bas för mina sidor.

Här är min Index-sidokomponent:

import { useState } from "react";
import Layout from "../components/Layout";

export const render = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <Layout>
      <h1>index</h1>
      <p>the count is {count}</p>
      <button onClick={increment}>increment</button>
    </Layout>
  );
};

Här är min Layout-komponent:

import type { ReactNode } from "react"

export default (props: { children : ReactNode }) => {
    return (
        <>
            <!doctype html>
            <html>
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <link href="./output.css" rel="stylesheet">
                </head>
                <body>
                    {props.children}
                </body>
            </html>
        </>
    )
}

När jag kör servern och försöker besöka sidan får jag följande fel:

BuildError: Förväntat identifierare men hittade "!" I app/components/Layout.tsx:6:14

            <!doctype html>

BuildError: Förväntade ">" men hittade "" I app/components/Layout.tsx:6:15

            <!doctype html>

BuildError: Syntaxfel!! I app/components/Layout.tsx:19:12

        </>

VSCode ger mig också detta lintfel:

JSX-fragmentet har ingen motsvarande avslutande tagg.

Hur kan jag ha doctype och html-taggar i min Layout-komponent?

Svar #1

Jag listade ut att renderToReadableStream automatiskt lägger till doctype till komponenten, så jag kan bara använda mitt ursprungliga exempel utan doctype-taggen och det fungerar utmärkt.