Skip to content

Commit 7d9962a

Browse files
Rich-Harriselliott-with-the-longest-name-on-githubteemingc
authored
docs: update await expressions documentation (#16822)
* docs: update await expressions documentation * Update documentation/docs/03-template-syntax/19-await-expressions.md Co-authored-by: Tee Ming <chewteeming01@gmail.com> * Update documentation/docs/03-template-syntax/19-await-expressions.md Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com> * Update documentation/docs/03-template-syntax/19-await-expressions.md Co-authored-by: Tee Ming <chewteeming01@gmail.com> * Update documentation/docs/03-template-syntax/19-await-expressions.md --------- Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com> Co-authored-by: Tee Ming <chewteeming01@gmail.com>
1 parent 8680c29 commit 7d9962a

File tree

1 file changed

+21
-19
lines changed

1 file changed

+21
-19
lines changed

documentation/docs/03-template-syntax/19-await-expressions.md

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,6 @@ export default {
2323

2424
The experimental flag will be removed in Svelte 6.
2525

26-
## Boundaries
27-
28-
Currently, you can only use `await` inside a [`<svelte:boundary>`](svelte-boundary) with a `pending` snippet:
29-
30-
```svelte
31-
<svelte:boundary>
32-
<MyApp />
33-
34-
{#snippet pending()}
35-
<p>loading...</p>
36-
{/snippet}
37-
</svelte:boundary>
38-
```
39-
40-
This restriction will be lifted once Svelte supports asynchronous server-side rendering (see [caveats](#Caveats)).
41-
42-
> [!NOTE] In the [playground](/playground), your app is rendered inside a boundary with an empty pending snippet, so that you can use `await` without having to create one.
43-
4426
## Synchronized updates
4527

4628
When an `await` expression depends on a particular piece of state, changes to that state will not be reflected in the UI until the asynchronous work has completed, so that the UI is not left in an inconsistent state. In other words, in an example like [this](/playground/untitled#H4sIAAAAAAAAE42QsWrDQBBEf2VZUkhYRE4gjSwJ0qVMkS6XYk9awcFpJe5Wdoy4fw-ycdykSPt2dpiZFYVGxgrf2PsJTlPwPWTcO-U-xwIH5zli9bminudNtwEsbl-v8_wYj-x1Y5Yi_8W7SZRFI1ZYxy64WVsjRj0rEDTwEJWUs6f8cKP2Tp8vVIxSPEsHwyKdukmA-j6jAmwO63Y1SidyCsIneA_T6CJn2ZBD00Jk_XAjT4tmQwEv-32eH6AsgYK6wXWOPPTs6Xy1CaxLECDYgb3kSUbq8p5aaifzorCt0RiUZbQcDIJ10ldH8gs3K6X2Xzqbro5zu1KCHaw2QQPrtclvwVSXc2sEC1T-Vqw0LJy-ClRy_uSkx2ogHzn9ADZ1CubKAQAA)...
@@ -99,7 +81,9 @@ let b = $derived(await two());
9981
10082
## Indicating loading states
10183

102-
In addition to the nearest boundary's [`pending`](svelte-boundary#Properties-pending) snippet, you can indicate that asynchronous work is ongoing with [`$effect.pending()`]($effect#$effect.pending).
84+
To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](svelte-boundary#Properties-pending) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
85+
86+
After the contents of a boundary have resolved for the first time and replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`]($effect#$effect.pending). This is what you would use display a "we're asynchronously validating your input" spinner next to a form field, for example.
10387

10488
You can also use [`settled()`](svelte#settled) to get a promise that resolves when the current update is complete:
10589

@@ -133,6 +117,24 @@ async function onclick() {
133117

134118
Errors in `await` expressions will bubble to the nearest [error boundary](svelte-boundary).
135119

120+
## Server-side rendering
121+
122+
Svelte supports asynchronous server-side rendering (SSR) with the `render(...)` API. To use it, simply await the return value:
123+
124+
```js
125+
/// file: server.js
126+
import { render } from 'svelte/server';
127+
import App from './App.svelte';
128+
129+
const { head, body } = +++await+++ render(App);
130+
```
131+
132+
> [!NOTE] If you're using a framework like SvelteKit, this is done on your behalf.
133+
134+
If a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, that snippet will be rendered while the rest of the content is ignored. All `await` expressions encountered outside boundaries with `pending` snippets will resolve and render their contents prior to `await render(...)` returning.
135+
136+
> [!NOTE] In the future, we plan to add a streaming implementation that renders the content in the background.
137+
136138
## Caveats
137139

138140
As an experimental feature, the details of how `await` is handled (and related APIs like `$effect.pending()`) are subject to breaking changes outside of a semver major release, though we intend to keep such changes to a bare minimum.

0 commit comments

Comments
 (0)