HttpStatusCode

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

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

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

Usage
Setting a 404 status code for the unmatched routes
Setting a 404 status code for missing pages for dynamic routes

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) 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} />
      <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) 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} />
      <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, either in createServerData$, or createResource.

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

routes/[house].tsx

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

(alias) function Show<T>(props: {
    when: T | undefined | null | false;
    keyed: true;
    fallback?: JSX.Element;
    children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
}): () => JSX.Element (+1 overload)
import Show } from 'solid-js';
import { ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary, useRouteData(alias) const useRouteData: <T>() => MaybeReturnType<T>
import useRouteData, RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs, ErrorMessage(alias) function ErrorMessage(props: {
    error: any;
}): JSX.Element
import ErrorMessage } from 'solid-start';
import { HttpStatusCode(alias) function HttpStatusCode(props: {
    code: number;
}): null
import HttpStatusCode, createServerData$(alias) const createServerData$: {
    <T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S> | undefined): Resource<T | undefined>;
    <T, S = true>(fetcher: RouteDataFetcher<...>, options: RouteDataOptions<...>): Resource<...>;
}
import createServerData$, ServerError(alias) class ServerError
import ServerError } from "solid-start/server";
 
export function routeDatafunction routeData({ params }: RouteDataArgs): Resource<{
    house: string;
} | undefined>({ params(parameter) params: Params }: RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs) {
  return createServerData$(alias) createServerData$<{
    house: string;
}, string>(fetcher: RouteDataFetcher<string, {
    house: string;
}>, options?: RouteDataOptions<undefined, string> | undefined): Resource<...> (+1 overload)
import createServerData$(async (house(parameter) house: string: string) => {
    if (house(parameter) house: string != 'gryffindor') {
      throw new ServerError(alias) new ServerError(message: string, { status, stack }?: {
    status?: number | undefined;
    stack?: string | undefined;
}): ServerError
import ServerError('House not found')
    }
    return { house(property) house: string }
  }, { key(property) key?: RouteDataSource<string>: () => params(parameter) params: Params.housestring, deferStream(property) deferStream?: boolean | undefined: true });
}
 
export default function Housefunction House(): JSX.Element() {
  const houseconst house: Resource<{
    house: string;
} | undefined> = useRouteData(alias) useRouteData<({ params }: RouteDataArgs<unknown>) => Resource<{
    house: string;
} | undefined>>(): Resource<{
    house: string;
} | undefined>
import useRouteData<typeof routeDatafunction routeData({ params }: RouteDataArgs<unknown>): Resource<{
    house: string;
} | undefined>>();
  return (
    <ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary 
      fallback(property) fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined={e(parameter) e: any => (
        <ShowConditionally render its children or an optional fallback component

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

(alias) function Show<T>(props: {
    when: T | undefined | null | false;
    keyed: true;
    fallback?: JSX.Element;
    children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
}): () => JSX.Element (+1 overload)
import Show>
      )}
    >
      <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
        Gryffindor
      </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>>
    </ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
  );
}