solidjs.com

HttpHeader

HttpHeader is a component that allows you set a header on the HTTP response sent by the server.
tsx
<HttpHeader name="x-robots-tag" value="noindex" />;
tsx
<HttpHeader name="x-robots-tag" value="noindex" />;

Usage

Setting a header for catch-all routes

routes/*404.tsx
tsx
import { HttpHeader, HttpStatusCode } from "@solidjs/start";
 
export default function NotFound() {
  return (
    <div>
      <HttpStatusCode code={404} />
      <HttpHeader name="my-header" value="header-value" />
    </div>
  );
}
routes/*404.tsx
tsx
import { HttpHeader, HttpStatusCode } from "@solidjs/start";
 
export default function NotFound() {
  return (
    <div>
      <HttpStatusCode code={404} />
      <HttpHeader name="my-header" value="header-value" />
    </div>
  );
}

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 that needed to be loaded before responding.

Reference

<HttpHeader />

Import from "@solidjs/start" 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 } from "@solidjs/start";
 
function Component() {
  return <HttpHeader name="my-header" value="header-value" />;
}
tsx
import { HttpHeader } from "@solidjs/start";
 
function Component() {
  return <HttpHeader name="my-header" value="header-value" />;
}

Props

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