routes/*404.tsx
tsx
import { HttpHeader(alias) function HttpHeader(props: {
name: string;
value: string;
}): null
import HttpHeader , HttpStatusCode(alias) function HttpStatusCode(props: {
code: number;
}): null
import HttpStatusCode } from "solid-start/server";
export default function NotFoundfunction NotFound(): JSX.Element
() { return (
<div(property) JSX.IntrinsicElements.div: JSX.HTMLAttributes<HTMLDivElement>
> <HttpStatusCode(alias) function HttpStatusCode(props: {
code: number;
}): null
import HttpStatusCode code={404} /> <HttpHeader(alias) function HttpHeader(props: {
name: string;
value: string;
}): null
import HttpHeader name="my-header" value="header-value" /> </div(property) JSX.IntrinsicElements.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
routes/*404.tsx
tsx
import { HttpHeader(alias) function HttpHeader(props: {
name: string;
value: string;
}): null
import HttpHeader , HttpStatusCode(alias) function HttpStatusCode(props: {
code: number;
}): null
import HttpStatusCode } from "solid-start/server";
export default function NotFoundfunction NotFound(): JSX.Element
() { return (
<div(property) JSX.IntrinsicElements.div: JSX.HTMLAttributes<HTMLDivElement>
> <HttpStatusCode(alias) function HttpStatusCode(props: {
code: number;
}): null
import HttpStatusCode code={404} /> <HttpHeader(alias) function HttpHeader(props: {
name: string;
value: string;
}): null
import HttpHeader name="my-header" value="header-value" /> </div(property) JSX.IntrinsicElements.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
As you render the page you may want to add additional headers. The HttpHeader component will do that for you. You can pass it a name and value and that will get added to the Response headers sent back to the browser.
Keep in mind, when streaming responses(renderStream), HTTP headers can only be included that are added before the stream first flushed. Be sure to add deferStream to any resources or createServerData$ calls that needed to be loaded before responding.