title |
---|
Web standards |
Throughout this documentation, you'll see references to the standard Web APIs that SvelteKit builds on top of. Rather than reinventing the wheel, we use the platform, which means your existing web development skills are applicable to SvelteKit. Conversely, time spent learning SvelteKit will help you be a better web developer elsewhere.
These APIs are available in all modern browsers and in many non-browser environments like Cloudflare Workers, Deno and Vercel Edge Functions. During development, and in adapters for Node-based environments (including AWS Lambda), they're made available via polyfills where necessary (for now, that is — Node is rapidly adding support for more web standards).
In particular, you'll get comfortable with the following:
SvelteKit uses fetch
for getting data from the network. It's available in hooks and endpoints as well as in the browser.
A special version of
fetch
is available inload
functions for invoking endpoints directly during server-side rendering, without making an HTTP call, while preserving credentials. (To make credentialled fetches in server-side code outsideload
, you must explicitly passcookie
and/orauthorization
headers.) It also allows you to make relative requests, whereas server-sidefetch
normally requires a fully qualified URL.
Besides fetch
itself, the Fetch API includes the following interfaces:
An instance of Request
is accessible in hooks and endpoints as event.request
. It contains useful methods like request.json()
and request.formData()
for e.g. getting data that was posted to an endpoint.
An instance of Response
is returned from await fetch(...)
. Fundamentally, a SvelteKit app is a machine for turning a Request
into a Response
.
The Headers
interface allows you to read incoming request.headers
and set outgoing response.headers
:
// @errors: 2461
/// file: src/routes/what-is-my-user-agent.js
/** @type {import('@sveltejs/kit').RequestHandler} */
export function get(event) {
// log all headers
console.log(...event.request.headers);
return {
body: {
// retrieve a specific header
userAgent: event.request.headers.get('user-agent')
}
};
}
URLs are represented by the URL
interface, which includes useful properties like origin
and pathname
(and, in the browser, hash
). This interface shows up in various places — event.url
in hooks and endpoints, $page.url
in pages, from
and to
in beforeNavigate
and afterNavigate
and so on.
Wherever you encounter a URL, you can access query parameters via url.searchParams
, which is an instance of URLSearchParams
:
// @filename: ambient.d.ts
declare global {
const url: URL;
}
export {};
// @filename: index.js
// ---cut---
const foo = url.searchParams.get('foo');
The Web Crypto API is made available via the crypto
global. It's used internally for Content Security Policy headers, but you can also use it for things like generating UUIDs:
const uuid = crypto.randomUUID();