Skip to content

Commit 6b331e6

Browse files
Merge pull request #21 from vuejs-fr/typo
Typo, conjugaison et graphie rectifiée
2 parents 9bbfea4 + a1646b1 commit 6b331e6

15 files changed

+92
-92
lines changed

en/README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
1010
## Le rendu côté serveur ou SSR, qu'est-ce que c'est ?
1111

12-
Vue.js est un framework pour créer des applications côté client. Par défaut, Vue génère en sortie un DOM manipulable dans le navigateur. Il est cependant également possible de faire le rendu des mêmes composants sous forme de chaîne de caractères HTML côté serveur, de les envoyer directement au navigateur et d'« hydrater » les balises statiques fournies en une application cliente pleinement interactive.
12+
Vue.js est un framework pour créer des applications côté client. Par défaut, Vue génère en sortie un DOM manipulable dans le navigateur. Il est cependant également possible de faire le rendu des mêmes composants sous forme de chaine de caractères HTML côté serveur, de les envoyer directement au navigateur et d'« hydrater » les balises statiques fournies en une application cliente pleinement interactive.
1313

14-
Une application Vue.js rendue du côté serveur peut également être considérée comme « isomorphique » ou « universelle », dans le sens où la majorité du code est exécutable côté serveur **et** coté client.
14+
Une application Vue.js rendue du côté serveur peut également être considérée comme « isomorphique » ou « universelle », dans le sens où la majorité du code est exécutable côté serveur **et** côté client.
1515

1616
## Pourquoi faire du SSR ?
1717

@@ -21,29 +21,29 @@ En comparaison des applications monopages traditionnelles (SPA pour *Single-Page
2121

2222
À noter qu'à présent, Google et Bing savent parfaitement indexer des applications JavaScript synchrones. Synchrone est le mot important ici. Si votre application débute avec une animation de chargement, puis va chercher le contenu via Ajax, l'indexeur n'attendra pas que cette action soit finie. Cela signifie que si vous avez du contenu asynchrone injecté sur des pages où la SEO est importante, du SSR serait nécessaire.
2323

24-
- De meilleurs temps d'accès au contenu, en particulier pour les connexions Internet lentes ou les appareils lents. Le rendu des balises côté serveur n'a pas besoin d'attendre le chargement de tous les fichiers JavaScript pour que le code soit exécuté en vue d'être affiché. Ainsi votre utilisateur verra apparaître une page complètement rendue très tôt. Cela conduit généralement à une meilleure expérience utilisateur, ce qui peut-être critique pour les applications où le temps d'accès au contenu est directement lié au taux de conversion.
24+
- De meilleurs temps d'accès au contenu, en particulier pour les connexions Internet lentes ou les appareils lents. Le rendu des balises côté serveur n'a pas besoin d'attendre le chargement de tous les fichiers JavaScript pour que le code soit exécuté en vue d'être affiché. Ainsi votre utilisateur verra apparaitre une page complètement rendue très tôt. Cela conduit généralement à une meilleure expérience utilisateur, ce qui peut-être critique pour les applications où le temps d'accès au contenu est directement lié au taux de conversion.
2525

2626
Il y a aussi des contraintes à prendre en considération quand on utilise du SSR :
2727

28-
- Des contraintes de développement. Le code spécifique aux navigateurs ne peut être utilisé que dans certains hooks ; plusieurs bibliothèques nécessitent une utilisation particulière pour être capable d'être exécutées dans une application côté serveur.
28+
- Des contraintes de développement. Le code spécifique aux navigateurs ne peut être utilisé que dans certains hooks ; plusieurs bibliothèques nécessitent une utilisation particulière pour être capables d'être exécutées dans une application côté serveur.
2929

30-
- Plus d'étapes de pré-compilation et de déploiement requises. Contrairement à une SPA qui peut être déployée sur un serveur de fichiers statiques, une application rendue côté serveur nécessite un environnement où un serveur Node.js peut tourner.
30+
- Plus d'étapes de précompilation et de déploiement requises. Contrairement à une SPA qui peut être déployée sur un serveur de fichiers statiques, une application rendue côté serveur nécessite un environnement où un serveur Node.js peut tourner.
3131

3232
- Plus de charge côté serveur. Faire le rendu d'une application complète en Node.js est évidemment une tâche demandant plus de ressources CPU que de simplement renvoyer des fichiers statiques. Aussi si vous vous attendez à un fort trafic, préparez-vous un serveur tenant la charge et utilisez astucieusement des stratégies de mise en cache.
3333

3434
Avant d'utiliser du SSR pour vos applications, la première question que vous devriez vous poser est si vous en avez réellement besoin. Cela dépendra de l'importance du temps d'accès au contenu pour votre application. Par exemple, si vous créez une interface d'administration avec un chargement initial de quelques secondes, cela n'a pas d'importance ; du SSR n'aurait pas de pertinence dans ce cas. Cependant, dans le cas où l'accès au contenu est une priorité absolue, du SSR peut vous aider à obtenir les meilleures performances de chargement initial.
3535

3636
## Rendu côté serveur vs. pré-rendu
3737

38-
Si vous envisagez d'utiliser du SSR seulement pour améliorer votre SEO sur des pages informatives à valeur ajoutée (par ex. `/`, `/about`, `/contact`, etc), alors vous devriez plutôt utiliser du pré-rendu. Plutôt que d'utiliser un serveur web pour compiler le HTML en temps réel, faites le simple pré-rendu de vos pages statiques en HTML pour des routes bien spécifiques lors d'une phase de pré-compilation. L'avantage est que faire du pré-rendu est plus simple et vous permet de garder un site avec une partie cliente statique.
38+
Si vous envisagez d'utiliser du SSR seulement pour améliorer votre SEO sur des pages informatives à valeur ajoutée (par ex. `/`, `/about`, `/contact`, etc.), alors vous devriez plutôt utiliser du pré-rendu. Plutôt que d'utiliser un serveur web pour compiler le HTML en temps réel, faites le simple pré-rendu de vos pages statiques en HTML pour des routes bien spécifiques lors d'une phase de précompilation. L'avantage est que faire du pré-rendu est plus simple et vous permet de garder un site avec une partie cliente statique.
3939

4040
Si vous utilisez webpack, vous pouvez facilement ajouter du pré-rendu avec le plugin [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin). Il a particulièrement bien été testé avec des applications Vue (en fait, [son créateur](https://github.com/chrisvfritz) est lui-même un membre de l'équipe principale de Vue).
4141

4242
## À propos de ce guide
4343

4444
Ce guide est dédié au rendu côté serveur des applications monopages utilisant Node.js en tant que serveur web. Utiliser le SSR de Vue avec une autre configuration serveur est un sujet qui ne sera pas abordé dans ce guide.
4545

46-
Ce guide va réellement entrer dans le détail et présuppose que vous êtes déjà familiarisé avec Vue.js et que vous avez un niveau de connaissance correcte concernant Node.js et webpack. Si vous préférez une solution de haut niveau fournissant une expérience de développement prête à l'emploi, vous devriez probablement essayer [Nuxt.js](https://nuxtjs.org/). Il est construit par-dessus l'écosystème de Vue et vous fourni des éléments préconçus ainsi que des fonctionnalités supplémentaires pour générer des sites web statiques. Il ne vous conviendra cependant pas si vous souhaitez avoir un contrôle plus direct sur la structure de votre application. Dans tous les cas, il reste toujours intéressant de parcourir ce guide pour mieux comprendre comment chaque élément fonctionne avec le reste.
46+
Ce guide va réellement entrer dans le détail et présuppose que vous êtes déjà familiarisé avec Vue.js et que vous avez un niveau de connaissance correcte concernant Node.js et webpack. Si vous préférez une solution de haut niveau fournissant une expérience de développement prête à l'emploi, vous devriez probablement essayer [Nuxt.js](https://nuxtjs.org/). Il est construit par-dessus l'écosystème de Vue et vous fournit des éléments préconçus ainsi que des fonctionnalités supplémentaires pour générer des sites web statiques. Il ne vous conviendra cependant pas si vous souhaitez avoir un contrôle plus direct sur la structure de votre application. Dans tous les cas, il reste toujours intéressant de parcourir ce guide pour mieux comprendre comment chaque élément fonctionne avec le reste.
4747

4848
Au fil de votre lecture, il peut être intéressant également de vous référer à la [démo HackerNews](https://github.com/vuejs/vue-hackernews-2.0/) qui utilise bon nombre des techniques expliquées dans ce guide.
4949

en/SUMMARY.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
- [Récupération de données et état](data.md)
66
- [Hydratation côté client](hydration.md)
77
- [Introduction au moteur de dépaquetage](bundle-renderer.md)
8-
- [Configuration de pré-compilation](build-config.md)
8+
- [Configuration de précompilation](build-config.md)
99
- [Gestion des CSS](css.md)
1010
- [Gestion des entêtes](head.md)
1111
- [Mise en cache](caching.md)

en/api.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@ L'argument `serverBundle` peut être l'un des éléments suivants :
2424

2525
- Un objet de paquetage généré par webpack + `vue-server-renderer/server-plugin`.
2626

27-
- Une chaîne de caractères de code JavaScript (non recommandé).
27+
- Une chaine de caractères de code JavaScript (non recommandé).
2828

29-
Voyez l'[Introduction au moteur de dépaquetage](./bundle-renderer.md) et la [Configuration de pré-compilation](./build-config.md) pour plus de détails.
29+
Voyez l'[Introduction au moteur de dépaquetage](./bundle-renderer.md) et la [Configuration de précompilation](./build-config.md) pour plus de détails.
3030

3131
## `Class: Renderer`
3232

3333
- #### `renderer.renderToString(vm[, context], callback)`
3434

35-
Fait le rendu d'une instance de Vue sous forme de chaîne de caractères. L'objet de contexte est optionnel. La fonction de rappel est une fonction de rappel typique de Node.js avec en premier argument l'erreur potentielle et en second argument la chaîne de caractères du rendu.
35+
Fait le rendu d'une instance de Vue sous forme de chaine de caractères. L'objet de contexte est optionnel. La fonction de rappel est une fonction de rappel typique de Node.js avec en premier argument l'erreur potentielle et en second argument la chaine de caractères du rendu.
3636

3737
- #### `renderer.renderToStream(vm[, context])`
3838

@@ -42,7 +42,7 @@ Voyez l'[Introduction au moteur de dépaquetage](./bundle-renderer.md) et la [Co
4242

4343
- #### `bundleRenderer.renderToString([context, ]callback)`
4444

45-
Fait le rendu d'un paquetage sous forme de chaîne de caractères. L'objet de contexte est optionnel. La fonction de rappel est une fonction de rappel typique de Node.js avec en premier argument l'erreur potentielle et en second argument la chaîne de caractères du rendu.
45+
Fait le rendu d'un paquetage sous forme de chaine de caractères. L'objet de contexte est optionnel. La fonction de rappel est une fonction de rappel typique de Node.js avec en premier argument l'erreur potentielle et en second argument la chaine de caractères du rendu.
4646

4747
- #### `bundleRenderer.renderToStream([context])`
4848

@@ -56,21 +56,21 @@ Voyez l'[Introduction au moteur de dépaquetage](./bundle-renderer.md) et la [Co
5656

5757
Le modèle de page supporte également l'interpolation basique en utilisant le contexte du rendu :
5858

59-
- utilisez les double moustaches pour de l'interpolation avec HTML échappé et
60-
- utilisez les triple moustaches pour de l'interpolation avec HTML non échappé.
59+
- utilisez les doubles moustaches pour de l'interpolation avec HTML échappé et
60+
- utilisez les triples moustaches pour de l'interpolation avec HTML non échappé.
6161

6262
Le modèle de page injecte automatiquement le contenu quand certaines données sont trouvées dans le contexte du rendu :
6363

6464
- `context.head`: (string) n'importe quelle balise d'entête qui devrait être injectée dans la balise `<head>` de la page.
6565

66-
- `context.styles`: (string) n'importe quelle CSS qui devrait être injectée dans la balide `<head>` de la page. Notez que cette propriété va automatiquement être injectée si vous utilisez `vue-loader` + `vue-style-loader` pour la CSS de vos composants.
66+
- `context.styles`: (string) n'importe quelle CSS qui devrait être injectée dans la balise `<head>` de la page. Notez que cette propriété va automatiquement être injectée si vous utilisez `vue-loader` + `vue-style-loader` pour la CSS de vos composants.
6767

6868
- `context.state`: (Object) L'état initial du store Vuex devrait être injecté dans la page sous la variable `window.__INITIAL_STATE__`. Le JSON en ligne est automatiquement désinfecté avec [serialize-javascript](https://github.com/yahoo/serialize-javascript) pour éviter les injections XSS.
6969

7070
En plus, quand `clientManifest` est fourni, le modèle de page injecte automatiquement les éléments suivants :
7171

7272
- JavaScript client et fichiers CSS nécessaires pour le rendu (avec les fragments asynchrones automatiquement déduits),
73-
- utilisation optimal des indices de ressources `<link rel="preload/prefetch">` pour le rendu de la page.
73+
- utilisation optimale des indices de ressources `<link rel="preload/prefetch">` pour le rendu de la page.
7474

7575
Vous pouvez désactiver toutes ces injections en passant `inject: false` au moteur de rendu.
7676

@@ -99,9 +99,9 @@ Voyez l'[Introduction au moteur de dépaquetage](./bundle-renderer.md) et la [Co
9999

100100
Une fonction pour contrôler quels fichiers doivent avoir une ressource d'indice `<link rel="preload">` de générée.
101101

102-
Par défaut, seuls les fichiers JavaScript et les fichiers CSS seront pré-chargés, car ils sont absolument nécessaires pour le démarrage de l'application.
102+
Par défaut, seuls les fichiers JavaScript et les fichiers CSS seront préchargés, car ils sont absolument nécessaires pour le démarrage de l'application.
103103

104-
Pour les autres types de fichiers comme les images et les polices, le pré-chargement pouvant gâcher de la bande passante inutilement et même baisser les performances, cela est laissé à votre appréciation. Vous pouvez contrôler précisément le pré-chargement en utilisant l'option `shouldPreload` :
104+
Pour les autres types de fichiers comme les images et les polices, le préchargement pouvant gâcher de la bande passante inutilement et même baisser les performances, cela est laissé à votre appréciation. Vous pouvez contrôler précisément le préchargement en utilisant l'option `shouldPreload` :
105105

106106
``` js
107107
const renderer = createBundleRenderer(bundle, {
@@ -114,7 +114,7 @@ Voyez l'[Introduction au moteur de dépaquetage](./bundle-renderer.md) et la [Co
114114
return true
115115
}
116116
if (type === 'font') {
117-
// pré-charger uniquement les polices woff2
117+
// précharger uniquement les polices woff2
118118
return /\.woff2$/.test(file)
119119
}
120120
if (type === 'image') {
@@ -131,15 +131,15 @@ Voyez l'[Introduction au moteur de dépaquetage](./bundle-renderer.md) et la [Co
131131
- seulement utilisée avec `createBundleRenderer`
132132
- Requiert : `boolean | 'once'` (`'once'` est seulement supporté dans la 2.3.1+)
133133

134-
Par défaut, pour chaque rendu, le moteur de dépaquetage va créer un nouveau contexte V8 et ré-exécuter le paquetage complet. Cela a plusieurs bénéfices, comme par exemple, isoler le code de l'application des processus du serveur ce qui permet d'[Eviter les singletons d'état](./structure.md#eviter-les-singletons-detat) mentionnés dans la documentation. Cependant, ce mode a des coûts de performance importants car ré-exécuter le paquetage est quelque chose de coûteux, surtout quand l'application est grosse.
134+
Par défaut, pour chaque rendu, le moteur de dépaquetage va créer un nouveau contexte V8 et réexécuter le paquetage complet. Cela a plusieurs bénéfices, par exemple, isoler le code de l'application des processus du serveur ce qui permet d'[Éviter les singletons d'état](./structure.md#eviter-les-singletons-detat) mentionnés dans la documentation. Cependant, ce mode a des couts de performance importants car réexécuter le paquetage est quelque chose de couteux, surtout quand l'application est grosse.
135135

136-
Cette option est par défaut à `true` pour la rétro-compatibilité, mais il est recommandé d'utiliser `runInNewContext: false` ou `runInNewContext: 'once'` si vous le pouvez.
136+
Cette option est par défaut à `true` pour la rétrocompatibilité, mais il est recommandé d'utiliser `runInNewContext: false` ou `runInNewContext: 'once'` si vous le pouvez.
137137

138138
> Dans la 2.3.0 cette option a un bogue car `runInNewContext: false` exécute toujours le paquetage en utilisant un contexte global séparé. Les informations suivantes sont donc valables pour la version 2.3.1+.
139139
140140
Avec `runInNewContext: false`, le code de paquetage va tourner dans le même contexte `global` du processus serveur, donc faites attention au code qui modifie `global` dans le code de votre application.
141141

142-
Avec `runInNewContext: 'once'` (2.3.1+), le paquetage est évalué dans un contexte `global` séparé, cependant cela n'est effectué qu'au démarrage. Cela permet une meilleur isolation du code de l'application puisqu'il empêche le paquetage d'accidentellement polluer l'objet `global` du processus serveur. Les limitations sont les suivantes :
142+
Avec `runInNewContext: 'once'` (2.3.1+), le paquetage est évalué dans un contexte `global` séparé, cependant cela n'est effectué qu'au démarrage. Cela permet une meilleure isolation du code de l'application puisqu'il empêche le paquetage d'accidentellement polluer l'objet `global` du processus serveur. Les limitations sont les suivantes :
143143

144144
1. Les dépendances qui modifient l'objet `global` (ex. polyfills) ne peuvent être externalisées dans ce mode,
145145
2. Les valeurs retournées lors de l'exécution du paquetage utiliseront des constructeurs globaux différents. Par ex. une erreur levée à l'intérieur du paquetage ne sera pas une instance de `Error` dans le processus serveur.
@@ -184,7 +184,7 @@ Voyez l'[Introduction au moteur de dépaquetage](./bundle-renderer.md) et la [Co
184184
cache: {
185185
get: (key, cb) => {
186186
redisClient.get(key, (err, res) => {
187-
// gérer les erreur s'il y en a
187+
// gérer les erreurs s'il y en a
188188
cb(res)
189189
})
190190
},
@@ -209,7 +209,7 @@ Voyez l'[Introduction au moteur de dépaquetage](./bundle-renderer.md) et la [Co
209209
})
210210
```
211211

212-
Consultez l'[implementation de `v-show` côté serveur](https://github.com/vuejs/vue/blob/dev/src/platforms/web/server/directives/show.js) en tant qu'exemple.
212+
Consultez l'[implémentation de `v-show` côté serveur](https://github.com/vuejs/vue/blob/dev/src/platforms/web/server/directives/show.js) en tant qu'exemple.
213213

214214
## Plugins webpack
215215

@@ -233,4 +233,4 @@ const plugin = new VueSSRServerPlugin({
233233
})
234234
```
235235

236-
Voir la [Configuration de pré-compilation](./build-config.md) pour plus d'informations.
236+
Voir la [Configuration de précompilation](./build-config.md) pour plus d'informations.

en/basic.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ renderer.renderToString(app, (err, html) => {
3636

3737
## Intégration avec un serveur
3838

39-
Il est plus simple d'utiliser le code précédent avec un serveur Node.js, comme par exemple [Express](https://expressjs.com/) :
39+
Il est plus simple d'utiliser le code précédent avec un serveur Node.js, par exemple [Express](https://expressjs.com/) :
4040

4141
``` bash
4242
npm install express --save
@@ -110,7 +110,7 @@ Le modèle de page supporte également une interpolation simple. Avec le modèle
110110
``` html
111111
<html>
112112
<head>
113-
<!-- utilisation de la double moustache pour l'interpolation avec HTML échapé -->
113+
<!-- utilisation de la double moustache pour l'interpolation avec HTML échappé -->
114114
<title>{{ title }}</title>
115115

116116
<!-- utilisation de la triple moustache pour l'interpolation du HTML -->

0 commit comments

Comments
 (0)