HttpHeader

`HttpHeader` is a component that allows you set a header on the HTTP response sent by the server.

tsx
<HttpHeader(alias) function HttpHeader(props: {
    name: string;
    value: string;
}): null
import HttpHeader name(property) name: string="x-robots-tog" value(property) value: string="noindex" />

tsx
<HttpHeader(alias) function HttpHeader(props: {
    name: string;
    value: string;
}): null
import HttpHeader name(property) name: string="x-robots-tog" value(property) value: string="noindex" />

Usage
Setting a header for catch-all routes
Reference
<HttpHeader />

Usage

Setting a header for catch-all routes

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.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
      <HttpStatusCode(alias) function HttpStatusCode(props: {
    code: number;
}): null
import HttpStatusCode code(property) code: number={404} />
      <HttpHeader(alias) function HttpHeader(props: {
    name: string;
    value: string;
}): null
import HttpHeader name(property) name: string="my-header" value(property) value: string="header-value" />
    </div(property) JSX.HTMLElementTags.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.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
      <HttpStatusCode(alias) function HttpStatusCode(props: {
    code: number;
}): null
import HttpStatusCode code(property) code: number={404} />
      <HttpHeader(alias) function HttpHeader(props: {
    name: string;
    value: string;
}): null
import HttpHeader name(property) name: string="my-header" value(property) value: string="header-value" />
    </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
  );
}

As you render the page you may want to add additional HTTP headers to the response. 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.

Reference

`<HttpHeader />`

Import from solid-start/server and use it anywhere in your component tree. It will add the header if that part of the tree is rendered on the server.

tsx
import { HttpHeader(alias) function HttpHeader(props: {
    name: string;
    value: string;
}): null
import HttpHeader } from "solid-start/server";
 
function Componentfunction Component(): JSX.Element() {
  return <HttpHeader(alias) function HttpHeader(props: {
    name: string;
    value: string;
}): null
import HttpHeader name(property) name: string="my-header" value(property) value: string="header-value" />
}

tsx
import { HttpHeader(alias) function HttpHeader(props: {
    name: string;
    value: string;
}): null
import HttpHeader } from "solid-start/server";
 
function Componentfunction Component(): JSX.Element() {
  return <HttpHeader(alias) function HttpHeader(props: {
    name: string;
    value: string;
}): null
import HttpHeader name(property) name: string="my-header" value(property) value: string="header-value" />
}

Props

name - The name of the header to set
value - The value of the header to set