``js // SSE only supports GET request export async function GET({ url }) { const stream = new ReadableStream({ start(controller) { // You can enqueue multiple data asynchronously here. const myData = ["abc", "def"] myData.forEach(data => { controller.enqueue(data: ${data}\n\n`) }) controller.close() }, cancel() { // cancel your resources here } });

return new Response(stream, {
    headers: {
        // Denotes the response as SSE
        'Content-Type': 'text/event-stream', 
        // Optional. Request the GET request not to be cached.
        'Cache-Control': 'no-cache', 
    }
})

} ```

js export async function load({isDataRequest}) { const slowData = getSlowData(); return { nested: { slow: isDataRequest ? slowData : await slowData } }; }

In this example, we race two promises: a 200ms delay and the actual data call we want to make. If the delay resolves first, then the data call is taking longer than 200ms and we should go ahead and render the page with partial data. If the data call resolves first, then we got the data under the time limit and we can render the page with complete data.

```js const TIME_TO_RESOLVE_MS = 200; export async function load() { const slowData = getSlowData();

const result = await Promise.race([delay(TIME_TO_RESOLVE_MS), slowData]);

return { nested: { slow: result ? result : slowData } }; }

async function getSlowData() { // randomly delay either 50ms or 1s // this simulates variable API response times await delay(Math.random() < 0.5 ? 50 : 1000); return '😴'; }

function delay(ms) { return new Promise(res => setTimeout(res, ms)); } ```

Every property of an object returned by the load function can be a promise which itself can return an object that can have a promise as property, and so on.

Can build a tree of promises based on data delivery priority.

```html

<form action="/baz"> <label> Query <input name="query"> </label> <label> Sort <input name="sort"> </label> <label> Order <input name="order"> </label> <label> Page <input name="page"> </label> </form>

```

```js / * .env.development VITE_API_URL=http://localhost:1337/api/blog-posts /

/ * .env.production VITE_API_URL=https://APP.herokuapp.com/api/blog-posts /

import { error, type Load } from '@sveltejs/kit';

import { VITE_API_URL } from '$env/static/private';

export const load: Load = async () => { const res = await fetch(VITE_API_URL); const { data } = await res.json();

if (res.ok) return { blogs: data }; throw error(404, 'Unable to fetch blogs'); }; ```

js export const load: PageServerLoad = () => { return { post: fetchPost(), streamed: { comments: fetchComments() } }; }; ```svelte

<script lang="ts"> import type { PageData } from './$types'; export let data: PageData; </script> <article> {data.post} </article>

{#await data.streamed.comments} Loading... {:then value} <br />

{#each value as comment}
1. {comment}
{/each}

{/await} ```

```js // CSRF

/* @type {import('@sveltejs/kit').Config} / const config = { kit: { checkOrigin?: true, } };   export default config; ```

```js // CSP svelte.config.js

/* @type {import('@sveltejs/kit').Config} / const config = { kit: { csp: { directives: { 'script-src': ['self'] }, reportOnly: { 'script-src': ['self'] } } } };

export default config; ```

https://www.swyx.io/jsdoc-swyxkit