mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
4.4 KiB
JSON
17 lines
4.4 KiB
JSON
{
|
|
"id": "3dcf67404507c12df8133ab8",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "http-status-code",
|
|
"content": "---\ntitle: HttpStatusCode\nuse_cases: \u003e-\n error pages, 404 handling, seo optimization, api responses, error boundaries,\n status codes\ntags:\n - status\n - http\n - errors\n - '404'\n - seo\n - response\nversion: '1.0'\ndescription: \u003e-\n Set HTTP status codes for SolidStart pages. Handle 404s, errors, and optimize\n SEO with proper status codes in server responses.\n---\n\n`HttpStatusCode` sets the HTTP status code for the page response while server-side rendering.\n\n```tsx\nimport { HttpStatusCode } from \"@solidjs/start\";\n\n\u003cHttpStatusCode code={404} /\u003e;\n```\n\n## Setting a 404 status code for the unmatched routes\n\nAs a page is rendered, you may want to set the status code to the `Response` depending on what happens.\nThe `HttpStatusCode` component does this for you by taking the `code` passed in and setting it to the `Response` status in the browser.\n\nSince `HttpStatusCode` is just a component, it can be used with [`ErrorBoundary`](/reference/components/error-boundary), [`Show`](/reference/components/show), [`Switch`](/reference/components/switch-and-match) or any of the other JSX control-flow components.\nThis means the same logic used when deciding what to render can inform what status code you are setting, allowing that logic to sit together.\n\nStatus codes are important tools for things like caching and SEO, so it is a good practice to send meaningful status codes.\n For example, for a `NotFound` page, you should send a `404` status code.\n\n```tsx {6} title=\"routes/*404.tsx\"\nimport { HttpStatusCode } from \"@solidjs/start\";\n\nexport default function NotFound() {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cHttpStatusCode code={404} /\u003e\n\t\t\t\u003ch1\u003ePage not found\u003c/h1\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Setting a 404 status code for missing pages for dynamic routes\n\nWhen using dynamic params in routes, setting a 404 status code if the given parameter for a segment points to a missing resource is important.\nUsually, the param is discovered to be missing when doing an async request with that parameter.\n\nErrors can be thrown from inside these fetchers and caught by the nearest [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary) component from where the data is accessed.\n`\u003cHttpStatusCode\u003e` pairs very well with error boundaries because you can inspect the error in the ErrorBoundary's fallback.\nIf the fetcher throws an error indicating the data was not found, you can render `\u003cHttpStatusCode code={404} /\u003e`.\n\nNote that when streaming responses [`renderStream`](/reference/rendering/render-to-stream), the HTTP Status can only be included if added _before_ the stream first flushed.\nIt is important to add `deferStream` to any resources calls that need to be loaded before responding.\n\n```tsx {7,17-19, 15, 23} title=\"routes/[house].tsx\"\nimport { Show, ErrorBoundary } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\nimport { HttpStatusCode } from \"@solidjs/start\";\n\nconst getHouse = query(async (house: string) =\u003e {\n\tif (house != \"gryffindor\") {\n\t\tthrow new Error(\"House not found\");\n\t}\n\treturn house;\n}, \"house\");\n\nexport default function House(props: { name: string }) {\n\tconst house = createAsync(() =\u003e getHouse(props.name), { deferStream: true });\n\treturn (\n\t\t\u003cErrorBoundary\n\t\t\tfallback={(e) =\u003e (\n\t\t\t\t\u003cShow when={e.message === \"House not found\"}\u003e\n\t\t\t\t\t\u003cHttpStatusCode code={404} /\u003e\n\t\t\t\t\u003c/Show\u003e\n\t\t\t)}\n\t\t\u003e\n\t\t\t\u003cdiv\u003e{house()}\u003c/div\u003e\n\t\t\u003c/ErrorBoundary\u003e\n\t);\n}\n```\n\n## Parameters\n\n| Property | Type | Description |\n| -------- | ------ | -------------------- |\n| code | number | The HTTP status code |",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/http-status-code.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-start/reference/server/http-status-code.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 3528,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "7e073107a255c59c93bde4e621a7104ff2815a2bde799e50469e28eeac7f8a11",
|
|
"timestamp": "2026-02-23T11:43:00.195371598+01:00"
|
|
} |