Skip to content

Commit b4b81f4

Browse files
KocalKocal
authored
Merge branch 'working' into cache
2 parents 5e268e5 + 49eb5dd commit b4b81f4

File tree

3 files changed

+23
-22
lines changed

3 files changed

+23
-22
lines changed

‎en/SUMMARY.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
- [Introduction au moteur de dépaquetage](bundle-renderer.md)
88
- [Configuration de pré-compilation](build-config.md)
99
- [Gestion des CSS](css.md)
10-
- [Gestion des entêtes (En)](head.md)
10+
- [Gestion des entêtes](head.md)
1111
- [Mise en cache](caching.md)
12-
- [Envoi par flux (En)](streaming.md)
12+
- [Envoi par flux](streaming.md)
1313
- [Réference de l'API (En)](api.md)
1414
- [createRenderer (En)](api.md#createrendereroptions)
1515
- [createBundleRenderer (En)](api.md#createbundlerendererbundle-options)

‎en/head.md

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
# Gestion des entêtes (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-ssr-docs).*
1+
# Gestion des entêtes
22

3-
Similar to asset injection, head management follows the same idea: we can dynamically attach data to the render `context` in a component's lifecycle, and then interpolate those data in `template`.
3+
Similaire à l'injection de fichier, la gestion des entêtes suit la même idée : nous pouvons dynamiquement attacher des données au rendu `context` dans le cycle de vie du composant, et interpoler ses données dans le template.
44

5-
> In version >=2.3.2, you can directly access the SSR context in a component as `this.$ssrContext`. In older versions you'd have to manually inject the SSR context by passing it to `createApp()` and expose it on the root instance's `$options` - child components can then access it via `this.$root.$options.ssrContext`.
5+
> Dans la version 2.3.2+, vous pouvez directement accéder au contexte SSR du composant via `this.$ssrContext`. Dans les versions plus anciennes, vous devez injecter manuellement le contexte SSR en le passant à la fonction `createApp()` et ainsi l'exposer dans `$options` de l'instance racine — les composants enfants pouvant y accéder via `this.$root.$options.ssrContext`.
66
7-
We can write a simple mixin to perform title management:
7+
Nous pouvons écrire un mixin simple pour effectuer la gestion du titre :
88

99
``` js
1010
// title-mixin.js
1111

1212
function getTitle (vm) {
13-
// components can simply provide a `title` option
14-
// which can be either a string or a function
13+
// les composants doivent simplement fournir une option `title`
14+
// pouvant être soit une chaîne de caractères soit une fonction
1515
const { title } = vm.$options
1616
if (title) {
1717
return typeof title === 'function'
@@ -38,13 +38,13 @@ const clientTitleMixin = {
3838
}
3939
}
4040

41-
// VUE_ENV can be injected with webpack.DefinePlugin
41+
// `VUE_ENV` peut être injecté avec `webpack.DefinePlugin`
4242
export default process.env.VUE_ENV === 'server'
4343
? serverTitleMixin
4444
: clientTitleMixin
4545
```
4646

47-
Now, a route component can make use of this to control the document title:
47+
Maintenant, un composant de route peut être utilisé ainsi pour contrôler le titre du document :
4848

4949
``` js
5050
// Item.vue
@@ -66,7 +66,7 @@ export default {
6666
}
6767
```
6868

69-
And inside the `template` passed to bundle renderer:
69+
Et passé au moteur de rendu de paquetage dans le template.
7070

7171
``` html
7272
<html>
@@ -79,12 +79,12 @@ And inside the `template` passed to bundle renderer:
7979
</html>
8080
```
8181

82-
**Notes:**
82+
**Notes :**
8383

84-
- Use double-mustache (HTML-escaped interpolation) to avoid XSS attacks.
84+
- Utilisez les doubles moustaches (interpolation de HTML échapé) pour éviter les attaques XSS.
8585

86-
- You should provide a default title when creating the `context` object in case no component has set a title during render.
86+
- Vous devriez fournir un titre par défaut quand vous créez l'object `context` au cas ou aucun composant de définisse de titre durant le rendu.
8787

8888
---
8989

90-
Using the same strategy, you can easily expand this mixin into a generic head management utility.
90+
En utilisant la même stratégie, vous pouvez facilement étendre votre mixin en une fonction utilitaire générique de gestion des entêtes.

‎en/streaming.md

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
# Envoi par flux (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-ssr-docs).*
1+
# Envoi par flux
22

3-
`vue-server-renderer` supports stream rendering out of the box, for both the base renderer and the bundle renderer. All you need to do is use `renderToStream` instead of `renderToString`:
3+
`vue-server-renderer` supporte nativement le rendu par flux (« stream »), aussi bien pour le moteur de rendu de base que pour le moteur de rendu de paquetage. Tout ce dont vous avez besoin est d'utiliser `renderToStream` à la place de `renderToString` :
4+
:
45

56
``` js
67
const stream = renderer.renderToStream(context)
78
```
89

9-
The returned value is a [Node.js stream](https://nodejs.org/api/stream.html):
10+
La valeur retournée est un [flux Node.js](https://nodejs.org/api/stream.html) :
1011

1112
``` js
1213
let html = ''
@@ -24,10 +25,10 @@ stream.on('error', err => {
2425
})
2526
```
2627

27-
## Streaming Caveats
28+
## Limitations de flux
2829

29-
In stream rendering mode, data is emitted as soon as possible when the renderer traverses the Virtual DOM tree. This means we can get an earlier "first chunk" and start sending it to the client faster.
30+
En mode de rendu par flux, la donnée est émise aussitôt que possible quand le moteur parcourt l'arbre du DOM virtuel. Cela signifie que l'envoi au client du « premier fragment » commence rapidement.
3031

31-
However, when the first data chunk is emitted, the child components may not even be instantiated yet, neither will their lifecycle hooks get called. This means if the child components need to attach data to the render context in their lifecycle hooks, these data will not be available when the stream starts. Since a lot of the context information (like head information or inlined critical CSS) needs to be appear before the application markup, we essentially have to wait until the stream to complete before we can start making use of these context data.
32+
Cependant, quand le premier fragment est émis, les composants enfants peuvent ne pas avoir encore été instanciés, et les hooks de leur cycle de vie ne seront jamais appelés. Cela signifie que si des composants enfants ont besoin d'attacher leurs données dans le contexte de rendu de leurs hooks de cycle de vie, elles ne seront pas accessibles au démarrage du flux. Comme beaucoup d'informations (comme les informations d'entête ou les CSS critiques injectées) ont besoin d'être insérées avant la balise de l'application, il est nécessaire d'attendre la fin du flux avant de commencer à utiliser ces données de contexte.
3233

33-
It is therefore **NOT** recommended to use streaming mode if you rely on context data populated by component lifecycle hooks.
34+
Il n'est donc **PAS** recommandé d'utiliser de l'envoi par flux si les données de vos contextes sont injectés dans les hooks du cycle de vie.

0 commit comments

Comments
 (0)