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
lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
="en"> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
/> <Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
>...</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
lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
="en"> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
/> <Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
>...</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
lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
="en"> <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
lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
="en"> <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.