You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/20-core-concepts/20-load.md
+12-12
Original file line number
Diff line number
Diff line change
@@ -479,15 +479,15 @@ This is useful for creating skeleton loading states, for example:
479
479
480
480
On platforms that do not support streaming, such as AWS Lambda, responses will be buffered. This means the page will only render once all promises resolve.
481
481
482
-
> Streaming data will only work when JavaScript is enabled. You should avoid returning nested promises from a universal `load` function if the page is server rendered, as these are _not_ streamed — instead, the promise is recreated when the function re-runs in the browser.
482
+
> Streaming data will only work when JavaScript is enabled. You should avoid returning nested promises from a universal `load` function if the page is server rendered, as these are _not_ streamed — instead, the promise is recreated when the function reruns in the browser.
483
483
484
484
## Parallel loading
485
485
486
486
When rendering (or navigating to) a page, SvelteKit runs all `load` functions concurrently, avoiding a waterfall of requests. During client-side navigation, the result of calling multiple server `load` functions are grouped into a single response. Once all `load` functions have returned, the page is rendered.
487
487
488
488
## Rerunning load functions
489
489
490
-
SvelteKit tracks the dependencies of each `load` function to avoid re-running it unnecessarily during navigation.
490
+
SvelteKit tracks the dependencies of each `load` function to avoid rerunning it unnecessarily during navigation.
491
491
492
492
For example, given a pair of `load` functions like these...
493
493
@@ -529,15 +529,15 @@ export async function load() {
529
529
}
530
530
```
531
531
532
-
...the one in `+page.server.js` will re-run if we navigate from `/blog/trying-the-raw-meat-diet` to `/blog/i-regret-my-choices` because `params.slug` has changed. The one in `+layout.server.js` will not, because the data is still valid. In other words, we won't call `db.getPostSummaries()` a second time.
532
+
...the one in `+page.server.js` will rerun if we navigate from `/blog/trying-the-raw-meat-diet` to `/blog/i-regret-my-choices` because `params.slug` has changed. The one in `+layout.server.js` will not, because the data is still valid. In other words, we won't call `db.getPostSummaries()` a second time.
533
533
534
-
A `load` function that calls `await parent()` will also re-run if a parent `load` function is re-run.
534
+
A `load` function that calls `await parent()` will also rerun if a parent `load` function is rerun.
535
535
536
-
Dependency tracking does not apply _after_ the `load` function has returned — for example, accessing `params.x` inside a nested [promise](#streaming-with-promises) will not cause the function to re-run when `params.x` changes. (Don't worry, you'll get a warning in development if you accidentally do this.) Instead, access the parameter in the main body of your `load` function.
536
+
Dependency tracking does not apply _after_ the `load` function has returned — for example, accessing `params.x` inside a nested [promise](#streaming-with-promises) will not cause the function to rerun when `params.x` changes. (Don't worry, you'll get a warning in development if you accidentally do this.) Instead, access the parameter in the main body of your `load` function.
537
537
538
538
### Manual invalidation
539
539
540
-
You can also re-run`load` functions that apply to the current page using [`invalidate(url)`](modules#$app-navigation-invalidate), which re-runs all `load` functions that depend on `url`, and [`invalidateAll()`](modules#$app-navigation-invalidateall), which re-runs every `load` function. Server load functions will never automatically depend on a fetched `url` to avoid leaking secrets to the client.
540
+
You can also rerun`load` functions that apply to the current page using [`invalidate(url)`](modules#$app-navigation-invalidate), which reruns all `load` functions that depend on `url`, and [`invalidateAll()`](modules#$app-navigation-invalidateall), which reruns every `load` function. Server load functions will never automatically depend on a fetched `url` to avoid leaking secrets to the client.
541
541
542
542
A `load` function depends on `url` if it calls `fetch(url)` or `depends(url)`. Note that `url` can be a custom identifier that starts with `[a-z]:`:
<button on:click={rerunLoadFunction}>Update random number</button>
579
579
```
580
580
581
-
### When do load functions re-run?
581
+
### When do load functions rerun?
582
582
583
-
To summarize, a `load` function will re-run in the following situations:
583
+
To summarize, a `load` function will rerun in the following situations:
584
584
585
585
- It references a property of `params` whose value has changed
586
586
- It references a property of `url` (such as `url.pathname` or `url.search`) whose value has changed. Properties in `request.url` are _not_ tracked
587
-
- It calls `await parent()` and a parent `load` function re-ran
587
+
- It calls `await parent()` and a parent `load` function reran
588
588
- It declared a dependency on a specific URL via [`fetch`](#making-fetch-requests) (universal load only) or [`depends`](types#public-types-loadevent), and that URL was marked invalid with [`invalidate(url)`](modules#$app-navigation-invalidate)
589
-
- All active `load` functions were forcibly re-run with [`invalidateAll()`](modules#$app-navigation-invalidateall)
589
+
- All active `load` functions were forcibly rerun with [`invalidateAll()`](modules#$app-navigation-invalidateall)
590
590
591
591
`params` and `url` can change in response to a `<a href="..">` link click, a [`<form>` interaction](form-actions#get-vs-post), a [`goto`](modules#$app-navigation-goto) invocation, or a [`redirect`](modules#sveltejs-kit-redirect).
592
592
593
-
Note that re-running a `load` function will update the `data` prop inside the corresponding `+layout.svelte` or `+page.svelte`; it does _not_ cause the component to be recreated. As a result, internal state is preserved. If this isn't what you want, you can reset whatever you need to reset inside an [`afterNavigate`](modules#$app-navigation-afternavigate) callback, and/or wrap your component in a [`{#key ...}`](https://svelte.dev/docs#template-syntax-key) block.
593
+
Note that rerunning a `load` function will update the `data` prop inside the corresponding `+layout.svelte` or `+page.svelte`; it does _not_ cause the component to be recreated. As a result, internal state is preserved. If this isn't what you want, you can reset whatever you need to reset inside an [`afterNavigate`](modules#$app-navigation-afternavigate) callback, and/or wrap your component in a [`{#key ...}`](https://svelte.dev/docs#template-syntax-key) block.
Copy file name to clipboardExpand all lines: documentation/docs/20-core-concepts/30-form-actions.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -249,7 +249,7 @@ export const actions = {
249
249
250
250
After an action runs, the page will be re-rendered (unless a redirect or an unexpected error occurs), with the action's return value available to the page as the `form` prop. This means that your page's `load` functions will run after the action completes.
251
251
252
-
Note that `handle` runs before the action is invoked, and does not re-run before the `load` functions. This means that if, for example, you use `handle` to populate `event.locals` based on a cookie, you must update `event.locals` when you set or delete the cookie in an action:
252
+
Note that `handle` runs before the action is invoked, and does not rerun before the `load` functions. This means that if, for example, you use `handle` to populate `event.locals` based on a cookie, you must update `event.locals` when you set or delete the cookie in an action:
253
253
254
254
```js
255
255
/// file: src/hooks.server.js
@@ -424,7 +424,7 @@ We can also implement progressive enhancement ourselves, without `use:enhance`,
424
424
const result = deserialize(await response.text());
425
425
426
426
if (result.type === 'success') {
427
-
// re-run all `load` functions, following the successful update
427
+
// rerun all `load` functions, following the successful update
Copy file name to clipboardExpand all lines: documentation/docs/20-core-concepts/50-state-management.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -140,7 +140,7 @@ When you navigate around your application, SvelteKit reuses existing layout and
140
140
<div>{@html data.content}</div>
141
141
```
142
142
143
-
...then navigating from `/blog/my-short-post` to `/blog/my-long-post` won't cause the component to be destroyed and recreated. The `data` prop (and by extension `data.title` and `data.content`) will change, but because the code isn't re-running, `estimatedReadingTime` won't be recalculated.
143
+
...then navigating from `/blog/my-short-post` to `/blog/my-long-post` won't cause the component to be destroyed and recreated. The `data` prop (and by extension `data.title` and `data.content`) will change, but because the code isn't rerunning, `estimatedReadingTime` won't be recalculated.
144
144
145
145
Instead, we need to make the value [_reactive_](https://learn.svelte.dev/tutorial/reactive-assignments):
0 commit comments