HttpStatusCode

`HttpStatusCode` is a component that sets the HTTP status code for the page response while server-side rendering.

tsx
<HttpStatusCode(alias) const HttpStatusCode: (props: HttpStatusCodeProps) => null
import HttpStatusCode code(property) HttpStatusCodeProps.code: number={404} />;

tsx
<HttpStatusCode(alias) const HttpStatusCode: (props: HttpStatusCodeProps) => null
import HttpStatusCode code(property) HttpStatusCodeProps.code: number={404} />;

Usage

Setting a 404 status code for the unmatched routes

As you render the page you may want to set the status code to the Response depending on how it goes. The HttpStatusCode component will do that for you. You can pass code and that will be set as the Response status sent back to the browser.

Since HttpStatusCode is just a component, it can be used with ErrorBoundaries, Show, Switch or any of the other JSX control-flow components. So the same logic you are using to decide what to render should inform what status code you are setting. This allows that logic to sit together.

Status codes are important tools for things like caching and SEO, so it's a good practice to send meaningful status codes. For example, for a NotFound page, you should send a 404 status code.

routes/*404.tsx

tsx
import { HttpStatusCode(alias) const HttpStatusCode: (props: HttpStatusCodeProps) => null
import HttpStatusCode } from "@solidjs/start";
 
export default function NotFoundfunction NotFound(): JSX.Element() {
  return (
    <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
      <HttpStatusCode(alias) const HttpStatusCode: (props: HttpStatusCodeProps) => null
import HttpStatusCode code(property) HttpStatusCodeProps.code: number={404} />
      <h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>>Page not found</h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>>
    </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
  );
}

routes/*404.tsx

tsx
import { HttpStatusCode(alias) const HttpStatusCode: (props: HttpStatusCodeProps) => null
import HttpStatusCode } from "@solidjs/start";
 
export default function NotFoundfunction NotFound(): JSX.Element() {
  return (
    <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
      <HttpStatusCode(alias) const HttpStatusCode: (props: HttpStatusCodeProps) => null
import HttpStatusCode code(property) HttpStatusCodeProps.code: number={404} />
      <h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>>Page not found</h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>>
    </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
  );
}

Setting a 404 status code for missing pages for dynamic routes

When you use dynamic params in routes, you may want to set a 404 status code if the given parameter for a segment points to a missing resource. Usually, you will find out that the param is missing when you do some async request with that param. You are probably inside a resource fetcher.

You can throw errors from inside these fetchers. These will be caught by the nearest <ErrorBoundary> component from where the data is accessed. <HttpStatusCode> pairs very well with error boundaries. You can inspect the error in the ErrorBoundary's fallback. If the fetcher throws an error indicating the data was not found, render a <HttpStatusCode code={404} />.

Keep in mind, when streaming responses (renderStream), the HTTP Status can only be included if added before the stream first flushed. Be sure to add deferStream to any resources calls that need to be loaded before responding.

routes/[house].tsx

tsx
import { ShowConditionally render its children or an optional fallback component

(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
    when: T | undefined | null | false;
    keyed?: false;
    fallback?: JSX.Element;
    children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show, ErrorBoundaryCatches uncaught errors inside components and renders a fallback content

Also supports a callback form that passes the error and a reset function:
```typescript
<ErrorBoundary fallback={
  (err, reset) => <div onClick={reset}>Error: {err.toString()}</div>
}>
  <MyComp />
</ErrorBoundary>
```
Errors thrown from the fallback can be caught by a parent ErrorBoundary

(alias) function ErrorBoundary(props: {
    fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
    children: JSX.Element;
}): JSX.Element
import ErrorBoundary } from "solid-js";
import { cache(alias) function cache<T extends (...args: any) => any>(fn: T, name: string): CachedFunction<T>
(alias) namespace cache
import cache, createAsync(alias) function createAsync<T>(fn: (prev: T) => Promise<T>, options: {
    name?: string;
    initialValue: T;
    deferStream?: boolean;
}): Accessor<T> (+1 overload)
import createAsync } from "@solidjs/router";
import { HttpStatusCode(alias) const HttpStatusCode: (props: HttpStatusCodeProps) => null
import HttpStatusCode } from "@solidjs/start";
 
const getHouseconst getHouse: ((house: string) => Promise<string>) & {
    keyFor: (house: string) => string;
    key: string;
} = cache(alias) cache<(house: string) => Promise<string>>(fn: (house: string) => Promise<string>, name: string): ((house: string) => Promise<string>) & {
    keyFor: (house: string) => string;
    key: string;
}
import cache(async (house(parameter) house: string: string) => {
  if (house(parameter) house: string != "gryffindor") {
    throw new Errorvar Error: ErrorConstructor
new (message?: string | undefined) => Error("House not found");
  }
  return house(parameter) house: "gryffindor";
}, "house");
 
export default function Housefunction House(props: {
    name: string;
}): JSX.Element(props(parameter) props: {
    name: string;
}: { name(property) name: string: string }) {
  const houseconst house: Accessor<string | undefined> = createAsync(alias) createAsync<string>(fn: (prev: string | undefined) => Promise<string>, options?: {
    name?: string | undefined;
    initialValue?: string | undefined;
    deferStream?: boolean | undefined;
} | undefined): Accessor<...> (+1 overload)
import createAsync(() => getHouseconst getHouse: (house: string) => Promise<string>(props(parameter) props: {
    name: string;
}.name(property) name: string), { deferStream(property) deferStream?: boolean | undefined: true });
  return (
    <ErrorBoundaryCatches uncaught errors inside components and renders a fallback content

Also supports a callback form that passes the error and a reset function:
```typescript
<ErrorBoundary fallback={
  (err, reset) => <div onClick={reset}>Error: {err.toString()}</div>
}>
  <MyComp />
</ErrorBoundary>
```
Errors thrown from the fallback can be caught by a parent ErrorBoundary

(alias) function ErrorBoundary(props: {
    fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
    children: JSX.Element;
}): JSX.Element
import ErrorBoundary
      fallback(property) fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element)={e(parameter) e: any => (
        <ShowConditionally render its children or an optional fallback component

(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
    when: T | undefined | null | false;
    keyed?: false;
    fallback?: JSX.Element;
    children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show when(property) when: boolean | null | undefined={e(parameter) e: any.messageany === "House not found"}>
          <HttpStatusCode(alias) const HttpStatusCode: (props: HttpStatusCodeProps) => null
import HttpStatusCode code(property) HttpStatusCodeProps.code: number={404} />
        </ShowConditionally render its children or an optional fallback component

(alias) function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
    when: T | undefined | null | false;
    keyed?: false;
    fallback?: JSX.Element;
    children: JSX.Element | RequiredParameter<TRenderFunction>;
}): JSX.Element (+1 overload)
import Show>
      )}
    >
      <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>{houseconst house: () => string | undefined()}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
    </ErrorBoundaryCatches uncaught errors inside components and renders a fallback content

Also supports a callback form that passes the error and a reset function:
```typescript
<ErrorBoundary fallback={
  (err, reset) => <div onClick={reset}>Error: {err.toString()}</div>
}>
  <MyComp />
</ErrorBoundary>
```
Errors thrown from the fallback can be caught by a parent ErrorBoundary

(alias) function ErrorBoundary(props: {
    fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
    children: JSX.Element;
}): JSX.Element
import ErrorBoundary>
  );
}