Skip to content
This repository has been archived by the owner on Jan 11, 2023. It is now read-only.

Commit

Permalink
site: example of how to use data from preload (#971)
Browse files Browse the repository at this point in the history
  • Loading branch information
sanconley authored Feb 26, 2020
1 parent c5b8c1f commit 7d3a85c
Showing 1 changed file with 8 additions and 1 deletion.
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

0 comments on commit 7d3a85c

Please sign in to comment.