Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion site/content/docs/04-preloading.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,13 @@ As seen in the [routing](docs#Routing) section, page components can have an opti
return { article };
}
</script>

<script>
export let article;
</script>

<h1>{article.title}</h1>

```

It lives in a `context="module"` script — see the [tutorial](https://svelte.dev/tutorial/module-exports) — because it's not part of the component instance itself; instead, it runs *before* the component is created, allowing you to avoid flashes while data is fetched.
Expand All @@ -37,7 +44,7 @@ So if the example above was `src/routes/blog/[slug].svelte` and the URL was `/bl

### Return value

If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object.
If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object. In both cases, the values in the object will be passed into the components as props.

When Sapper renders a page on the server, it will attempt to serialize the resolved value (using [devalue](https://github.com/Rich-Harris/devalue)) and include it on the page, so that the client doesn't also need to call `preload` upon initialization. Serialization will fail if the value includes functions or custom classes (cyclical and repeated references are fine, as are built-ins like `Date`, `Map`, `Set` and `RegExp`).

Expand Down