-
- {props.children}
+
+
+ {props.manager} create solid
+
+ {props.children}
, - a: props => { - return ( - - {props.children} - - ); - }, - "token-link": props => { - return ( - - {props.children} - - ); - }, - li: props => ( -
- {props.children}
-
-
- );
- },
- pre: props => (
-
- {props.children}
-
- - Error: - {props.children} -
-- Error: - {props.children} -
-oops. it went wrong.
+{props.children}
++ On the shoulders of open-source. SolidStart can be deployed to every platform Nitro has a + preset for. +
+
+ 
+
+
+
+
+ export default{" "}
+ defineConfig
+ {`({`}
+
+
+ {" "}server{`: `}
+
+ {`{`}
+
+
+ {" "}preset{`: `}
+
+ {`"`}
+ netlify
+ {`"`}
+
+
+ {" "}
+ {`}`}
+
+
+ {`})`}
+
+
+ + SolidStart integrates multiple separate packages to provide a complete functionality. Each + of these pieces can be replaced with your own implementation. +
+A strong, highly-performant serializer.
+Bundler and server runtime
+Dev env and bundler
+server APIs and presets
+Official client-side router.
++ (pun intended) +
++ Avoid waterfalls when updating data on the server. +
++ E.g.: when updating your view after a mutation, SolidStart will + prevent a waterfall even if a navigation is triggered by the + mutation. New data comes on the same flight as the mutation + response. +
++ During a roundtrip 2 identical requests never fly out, and 2 + identical resources are never serialized again. +
++ Form actions running on the server with code co-location and all the + bells, whisltles, and whimsy you need. +
++ Also known as Lambda Functions, SolidStart can create these API + endpoints automatically, just as any other route. +
++ Strongly parallelized data loading, easily define preloading + strategies and empower your users with the snappiest UX they can + imagine! +
+| cache | action | - |
|---|---|---|
| return | data, response | success message, error, response |
| throw | error, response | response |
{echoing.result}
; -} -``` - -While this method of using actions works, it leaves the implementation details of how you trigger `echo` up to you. When handling explicit user input, it's better to use a `form` for a multitude of reasons. - -## Using forms to submit data - -We highly recommend using HTML forms as your method to submit data with actions. HTML forms can be used even before JavaScript loads, leading to instantly interactive applications. - -They have the added benefit of implicit accessibility. They can save you valuable time that would have otherwise been spent designing a UI library that will never have the aforementioned benefits. - -When forms are used to submit actions, the first argument is an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData). To write a form using actions, pass the action to the action property of your form. You can then walk away with amazing, progressively enhanced forms! - -If you don't return a `Response` from your action, the user will stay on the same page and your resources will be re-triggered. You can also throw a `redirect` to tell the browser to navigate. - -```tsx twoslash -import { action, redirect } from "@solidjs/router"; - -const isAdmin = action(async (formData: FormData) => { - await new Promise((resolve, reject) => setTimeout(resolve, 1000)); - const username = formData.get("username"); - if (username === "admin") throw redirect("/admin"); - return new Error("Invalid username"); -}); - -export function MyComponent() { - return ( - - ); -} -``` - -## Server Actions - -Sometimes we need to make sure our action _only_ runs on the server. This is useful for: - -- Accessing internal APIs. -- Proxying external APIs. - - To use server secrets. - - To reduce the response payload by postprocessing. - - To bypass CORS. -- Running code incompatible with browsers. -- Or even connecting directly to a database. (Take caution, opinions on if this is a good idea are mixed. You should consider separating your backend and frontend). - -To do this, put a `"use server";` directive in your action function: - -```tsx twoslash {4} -import { action, redirect } from "@solidjs/router"; - -const isAdmin = action(async (formData: FormData) => { - "use server"; - await new Promise((resolve, reject) => setTimeout(resolve, 1000)); - const username = formData.get("username"); - if (username === "admin") throw redirect("/admin"); - return new Error("Invalid username"); -}); - -export function MyComponent() { - return ( - - ); -} -``` - -## Error Handling - -We strongly recommend with actions to "return" errors rather than throwing them. This can help with typing of submissions you'd use with `useSubmission`. This is important especially for handling progressive enhancement where no JS is present in the client so that we can use the error declaratively to render the updated page on the server. - -Additionally when using Server Actions it is good practice to try to handle errors on the server so that you can sanitize error messages. \ No newline at end of file diff --git a/docs/routes/core-concepts/api-routes.md b/docs/routes/core-concepts/api-routes.md deleted file mode 100644 index f6fa51c7b..000000000 --- a/docs/routes/core-concepts/api-routes.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -section: core-concepts -title: API Routes -order: 8 -active: true ---- - -# API Routes - -