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

Commit 7d3a85c

Browse files
authored
site: example of how to use data from preload (#971)
1 parent c5b8c1f commit 7d3a85c

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

site/content/docs/04-preloading.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@ As seen in the [routing](docs#Routing) section, page components can have an opti
1515
return { article };
1616
}
1717
</script>
18+
19+
<script>
20+
export let article;
21+
</script>
22+
23+
<h1>{article.title}</h1>
24+
1825
```
1926

2027
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.
@@ -37,7 +44,7 @@ So if the example above was `src/routes/blog/[slug].svelte` and the URL was `/bl
3744

3845
### Return value
3946

40-
If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object.
47+
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.
4148

4249
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`).
4350

0 commit comments

Comments
 (0)