|
1 | 1 | ---
|
2 |
| -title: Universal load functions |
| 2 | +title: Fonctions load universelles |
3 | 3 | ---
|
4 | 4 |
|
5 |
| -In the [previous section on loading](page-data) we loaded data from the server using `+page.server.js` and `+layout.server.js` files. This is very convenient if you need to do things like getting data directly from a database, or reading cookies. |
| 5 | +Dans le [précédent chapitre sur le chargement](page-data), nous avons chargé de la donnée depuis le serveur en utilisant les fichiers `+page.server.js` et `+layout.server.js`. Cette méthode est très pratique si vous avez besoin d'accéder directement à une base de données, ou de lire des cookies. |
6 | 6 |
|
7 |
| -Sometimes it doesn't make sense to load data from the server when doing a client-side navigation. For example: |
| 7 | +Parfois, charger de la donnée depuis le serveur lors d'une navigation côté client n'a pas vraiment de sens. Par exemple : |
8 | 8 |
|
9 |
| -- You're loading data from an external API |
10 |
| -- You want to use in-memory data if it's available |
11 |
| -- You want to delay navigation until an image has been preloaded, to avoid pop-in |
12 |
| -- You need to return something from `load` that can't be serialized (SvelteKit uses [devalue](https://github.com/Rich-Harris/devalue) to turn server data into JSON), such as a component or a store |
| 9 | +- Vous chargez de la donnée depuis une <span class="vo">[API](PUBLIC_SVELTE_SITE_URL/docs/development#api)</span> externe |
| 10 | +- Vous voulez utiliser de la donnée en mémoire du navigateur, si disponible |
| 11 | +- Vous voulez retarder la navigation jusqu'à ce qu'une image ait été chargée, pour éviter de la faire apparaître brusquement |
| 12 | +- Vous avez besoin de renvoyer quelque chose depuis `load` qui ne peut pas être sérialisé (SvelteKit utilise [devalue](https://github.com/Rich-Harris/devalue) pour transformer la donnée du serveur en <span class="vo">[JSON](PUBLIC_SVELTE_SITE_URL/docs/web#json)</span>), comme un composant ou un <span class="vo">[store](PUBLIC_SVELTE_SITE_URL/docs/sveltejs#store)</span> |
13 | 13 |
|
14 |
| -In this exercise, we're dealing with the latter case. The server `load` functions in `src/routes/red/+page.server.js`, `src/routes/green/+page.server.js` and `src/routes/blue/+page.server.js` return a `component` constructor, which can't be serialized like data. If you navigate to `/red`, `/green` or `/blue`, you'll see a 'Data returned from `load` ... is not serializable' error in the terminal. |
| 14 | +Dans cet exercice, nous avons à faire au dernier cas. Les fonction `load` de serveur dans `src/routes/red/+page.server.js`, `src/routes/green/+page.server.js` et `src/routes/blue/+page.server.js` renvoient un constructeur `component`, qui ne peut pas être sérialisé comme de la donnée. Si vous naviguez vers `/red`, `/green` ou `/blue`, vous verrez apparaître dans le terminal l'erreur "Data returned from `load` ... is not serializable" (_La donnée ... renvoyée par `load` n'est pas sérialisable_). |
15 | 15 |
|
16 |
| -To turn the server `load` functions into universal `load` functions, rename each `+page.server.js` file to `+page.js`. Now, the functions will run on the server during server-side rendering, but will also run in the browser when the app hydrates or the user performs a client-side navigation. |
| 16 | +Pour transformer les fonctions `load` de serveur en fonctions `load` universelles, renommez chaque fichier `+page.server.js` en `+page.js`. Désormais, les fonctions `load` seront exécutées sur le serveur lors du rendu côté serveur, mais elles seront également exécutées dans le navigateur lorsque l'application est hydratée, ou lorsque l'utilisateur ou l'utilisatrice déclenche une navigation côté client. |
17 | 17 |
|
18 |
| -We can now use the `component` returned from these `load` functions like any other value, including in `src/routes/+layout.svelte`: |
| 18 | +Nous pouvons maintenant utiliser la valeur `component` renvoyée par ces fonctions `load` comme n'importe quelle autre valeur, même dans `src/routes/+layout.svelte` : |
19 | 19 |
|
20 | 20 | ```svelte
|
21 | 21 | /// file: src/routes/+layout.svelte
|
22 | 22 | <nav
|
23 | 23 | class:has-color={!!$page.data.color}
|
24 | 24 | style:background={$page.data.color ?? 'var(--bg-2)'}
|
25 | 25 | >
|
26 |
| - <a href="/">home</a> |
27 |
| - <a href="/red">red</a> |
28 |
| - <a href="/green">green</a> |
29 |
| - <a href="/blue">blue</a> |
| 26 | + <a href="/">accueil</a> |
| 27 | + <a href="/red">rouge</a> |
| 28 | + <a href="/green">vert</a> |
| 29 | + <a href="/blue">bleu</a> |
30 | 30 |
|
31 | 31 | +++ {#if $page.data.component}
|
32 | 32 | <svelte:component this={$page.data.component} />
|
33 | 33 | {/if}+++
|
34 | 34 | </nav>
|
35 | 35 | ```
|
36 | 36 |
|
37 |
| -Read the [documentation](https://kit.svelte.dev/docs/load#universal-vs-server) to learn more about the distinction between server `load` functions and universal `load` functions, and when to use which. |
| 37 | +Rendez-vous dans la [documentation](PUBLIC_KIT_SITE_URL/docs/load#universal-vs-server) pour en apprendre plus sur la différence entre une fonction `load` de serveur et une fonction `load` universelle, ainsi que les cas d'usage de chacune. |
0 commit comments