Html
Html is a component that renders the html element on the server, and hydrates its body on the client.
tsx
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
<Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
<Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
</Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
tsx
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
<Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
<Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
</Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import 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(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
<Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
<Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
<Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
<FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
</Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
<Scripts(alias) function Scripts(): JSX.Element
import Scripts
</Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
</Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
}
tsx
export default function Root() { <Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
<Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
<Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
<Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
<FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
</Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
<Scripts(alias) function Scripts(): JSX.Element
import Scripts
</Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
</Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import 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.
