Html

Html is a component that renders the html element on the server, and hydrates its body on the client.
tsx
<Html lang="en">
<Head />
<Body>...</Body>
</Html>
tsx
<Html lang="en">
<Head />
<Body>...</Body>
</Html>


Usage

The Html Component represents the root of our document and is a wrapper over the native html tag. It accepts any attributes assignable to the native HTMLHtmlElement. All rendered elements must be a descendant of Html and all server rendered elements under it unless also under Body are not hydrated.

tsx
export default function Root() {
<Html lang="en">
<Head />
<Body>
<Routes>
<FileRoutes />
</Routes>
<Scripts />
</Body>
</Html>
}
tsx
export default function Root() {
<Html lang="en">
<Head />
<Body>
<Routes>
<FileRoutes />
</Routes>
<Scripts />
</Body>
</Html>
}

It is required to have a Head and Body component as children of Html. The Head component is used to render the head element on the server and hydrate it on the client. The Body component is used to render the body element on the server and hydrate it on the client. There is only one reason to not have a Html component as the root of your application and that is if you are using an index.html for your SPA.