From a19ee025d8598be49eb1905fe744485ab381fa7f Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Fri, 5 May 2017 20:34:57 +0200 Subject: [PATCH 1/8] Traduction de `routing.md` --- en/routing.md | 51 +++++++++++++++++++++++++++------------------------ 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/en/routing.md b/en/routing.md index a64a3c63..74827423 100644 --- a/en/routing.md +++ b/en/routing.md @@ -1,10 +1,10 @@ # Routage et fragmentation (En)

*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).* -## Routing with `vue-router` +## Routage avec `vue-router` -You may have noticed that our server code uses a `*` handler which accepts arbitrary URLs. This allows us to pass the visited URL into our Vue app, and reuse the same routing config for both client and server! +Vous avez sans doute remarqué que notre code serveur utilise le handler `*` qui accepte n'importe quelle URL. Cela nous permet de ré-utiliser la même configuration des routes pour le client et le serveur ! -It is recommended to use the official `vue-router` for this purpose. Let's first create a file where we create the router. Note similar to `createApp`, we also need a fresh router instance for each request, so the file exports a `createRouter` function: +Il est recommandé d'utiliser le routeur officiel de Vue `vue-router`. Commençons par créer un fichier où sera créé le routeur. De manière similaire à `createApp`, nous aurons besoin d'une nouvelle instance du routeur pour chaque requêtes, donc ce fichier exporte une fonction `createRouter` : ``` js // router.js @@ -23,7 +23,7 @@ export function createRouter () { } ``` -And update `app.js`: +Et modifier `app.js` : ``` js // app.js @@ -32,52 +32,55 @@ import App from './App.vue' import { createRouter } from './router' export function createApp () { - // create router instance + // crée l'instance du routeur const router = createRouter() const app = new Vue({ - // inject router into root Vue instance + // injection du routeur dans l'instance de Vue router, render: h => h(App) }) - // return both the app and the router + // retourne l'application et le routeur return { app, router } } ``` -Now we need to implement the server-side routing logic in `entry-server.js`: +Maintenant, il faut implémenter la logique des routes côté serveur dans `entry-server.js` : ``` js // entry-server.js import { createApp } from './app' export default context => { - // since there could potentially be asynchronous route hooks or components, - // we will be returning a Promise so that the server can wait until - // everything is ready before rendering. + // vu qu'il peut potentiellement avoir des composants ou des connecteurs + // de routes asynchrones, on retourne une Promise de telle sorte que + // le serveur patiente jusqu'à ce que tout soit prêt pour le rendu. return new Promise((resolve, reject) => { const { app, router } = createApp() - // set server-side router's location + // défini la location du routeur serveur router.push(context.url) - // wait until router has resolved possible async components and hooks + // on attend que le routeur ait terminé de traiter avec les composants et + // connecteurs asynchrones router.onReady(() => { const matchedComponents = router.getMatchedComponents() - // no matched routes, reject with 404 + // pas de routes correspondantes, on rejette la requête avec une 404 if (!matchedComponents.length) { reject({ code: 404 }) } - // the Promise should resolve to the app instance so it can be rendered + // la Promise doit résoudre l'instance de l'application, qui pourra + // ensuite être rendue resolve(app) }, reject) }) } ``` -Assuming the server bundle is already built (again, ignoring build setup for now), the server usage would look like this: +En assumant que le bundle serveur soit déjà fait (encore une fois, on ignore l'étape de configuration du build pour l'instant), l'usage de ce bundle ressemblerait à ça : + ``` js // server.js @@ -102,23 +105,23 @@ server.get('*', (req, res) => { }) ``` -## Code-Splitting +## Fragmentation du code -Code-splitting, or lazy-loading part of your app, helps reducing the amount of assets that need to be downloaded by the browser for the initial render, and can greatly improve TTI (time-to-interactive) for apps with large bundles. The key is "loading just what is needed" for the initial screen. +La séparation du code, ou les parties *lazy-loadées* de votre application, aide à réduire la quantité de ressources qui a besoin d'être téléchargée par le navigateur pour le rendu initial, et peut grandement améliorer le TTI (time-to-interactive) pour les grosses applications. Le but est de "charger uniquement ce qui est nécessaire" pour l'écran initial. -Vue provides async components as a first-class concept, combining it with [webpack 2's support for using dynamic import as a code-split point](https://webpack.js.org/guides/code-splitting-async/), all you need to do is: +Vue permet de créer des composants asynchrones (concept de *first-class*), en les combinant avec [le support de webpack 2 pour l'utilisation de l'importation dynamique pour fragmenter le code](https://webpack.js.org/guides/code-splitting-async/), tout ce que vous avez à faire est : ``` js -// changing this... +// changer ça : import Foo from './Foo.vue' -// to this: +// pour ça : const Foo = () => import('./Foo.vue') ``` -This would work under any scenario if you are building a pure client-side Vue app. However, there are some limitations when using this in SSR. First, you need to resolve all the async components upfront on the server before starting the render, because otherwise you will just get an empty placeholder in the markup. On the client, you also need to do this before starting the hydration, otherwise the client will run into content mismatch errors. +Cela fonctionnera dans n'importe quel scénario si vous êtes en train de faire une application Vue uniquement pour le côté client. Toutefois, il y aura certaines limitations en l'utilisant dans du SSR. Premièrement, il faut *résoudre* tous les composants asynchrones à l'avance sur le serveur avant de faire le rendu, car sinon il y aura juste un emplacement vide dans le code HTML. Pour le côté client, il faut aussi faire cela avant de commencer l'hydratation des données, sinon il y aurait des erreurs d'incompatibilités sur le contenu. -This makes it a bit tricky to use async components at arbitrary locations in your app (we will likely improve this in the future). However, **it works seamlessly if you do it at the route level** - i.e. use async components in your route configuration - because `vue-router` will automatically resolve matched async components when resolving a route. What you need to do is make sure to use `router.onReady` on both server and client. We already did that in our server entry, and now we just need to update the client entry: +Tout cela rend un peu compliqué l'utilisation des composants asynchrones à des endroits spécifiques dans votre application (nous allons probablement améliorer cela dans le futur). Toutefois, **cela fonctionne parfaitement si vous le faites au niveau de la route** - c.-à-d. d'utiliser les composants asynchrones dans la configuration des routes - car `vue-router` ira automatiquement résoudre les composants asynchrones nécessaires au bon fonctionnement de la route. Vous devez être sûr d'utiliser `router.onReady` sur le serveur et le client. Nous l'avons déjà fait pour le fichier d'entrée du serveur, il ne nous reste plus maintenant qu'à faire de même pour le fichier d'entrée du client : ``` js // entry-client.js @@ -132,7 +135,7 @@ router.onReady(() => { }) ``` -An example route config with async route components: +Un exemple de configuration de route avec des composants asynchrones : ``` js // router.js From 366ba07ecd98c187e62858a2e540e9a9e1b240c2 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 6 May 2017 00:04:20 +0200 Subject: [PATCH 2/8] =?UTF-8?q?Fix=20routing.md=20en=20respectant=20"Liber?= =?UTF-8?q?t=C3=A9s=20de=20traduction=20et=20anglicismes"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://github.com/vuejs-fr/vuejs.org/issues/4 --- en/routing.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/en/routing.md b/en/routing.md index 74827423..f713d921 100644 --- a/en/routing.md +++ b/en/routing.md @@ -53,7 +53,7 @@ Maintenant, il faut implémenter la logique des routes côté serveur dans `entr import { createApp } from './app' export default context => { - // vu qu'il peut potentiellement avoir des composants ou des connecteurs + // vu qu'il peut potentiellement avoir des composants ou des hooks // de routes asynchrones, on retourne une Promise de telle sorte que // le serveur patiente jusqu'à ce que tout soit prêt pour le rendu. return new Promise((resolve, reject) => { @@ -63,7 +63,7 @@ export default context => { router.push(context.url) // on attend que le routeur ait terminé de traiter avec les composants et - // connecteurs asynchrones + // hooks asynchrones router.onReady(() => { const matchedComponents = router.getMatchedComponents() // pas de routes correspondantes, on rejette la requête avec une 404 @@ -107,7 +107,7 @@ server.get('*', (req, res) => { ## Fragmentation du code -La séparation du code, ou les parties *lazy-loadées* de votre application, aide à réduire la quantité de ressources qui a besoin d'être téléchargée par le navigateur pour le rendu initial, et peut grandement améliorer le TTI (time-to-interactive) pour les grosses applications. Le but est de "charger uniquement ce qui est nécessaire" pour l'écran initial. +La séparation du code, ou les parties chargées à la volée de votre application, aide à réduire la quantité de ressources qui a besoin d'être téléchargée par le navigateur pour le rendu initial, et peut grandement améliorer le TTI (time-to-interactive) pour les grosses applications. Le but est de "charger uniquement ce qui est nécessaire" pour l'écran initial. Vue permet de créer des composants asynchrones (concept de *first-class*), en les combinant avec [le support de webpack 2 pour l'utilisation de l'importation dynamique pour fragmenter le code](https://webpack.js.org/guides/code-splitting-async/), tout ce que vous avez à faire est : From 5c18ba780faae925bc552b24b24a199d055def59 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 6 May 2017 00:04:39 +0200 Subject: [PATCH 3/8] Changement du titre pour `routing.md` --- en/SUMMARY.md | 2 +- en/routing.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/en/SUMMARY.md b/en/SUMMARY.md index 95bc4ece..bb5e3e96 100644 --- a/en/SUMMARY.md +++ b/en/SUMMARY.md @@ -1,7 +1,7 @@ - [Utilisation de base](basic.md) - [Écrire du code universel (En)](universal.md) - [Structure de code (En)](structure.md) -- [Routage et fragmentation (En)](routing.md) +- [Routage et fragmentation](routing.md) - [Pré-chargement et état (En)](data.md) - [Hydratation côté client (En)](hydration.md) - [Introduction à l'empaquetage (En)](bundle-renderer.md) diff --git a/en/routing.md b/en/routing.md index f713d921..24b6bb1f 100644 --- a/en/routing.md +++ b/en/routing.md @@ -1,4 +1,4 @@ -# Routage et fragmentation (En)

*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).* +# Routage et fragmentation ## Routage avec `vue-router` From 2f9380e3e3371f55b65f2b7fc535738ca93a10f5 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 6 May 2017 09:22:16 +0200 Subject: [PATCH 4/8] Traduction "first-class object" et "resolve" --- en/routing.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/en/routing.md b/en/routing.md index 24b6bb1f..9d1a6815 100644 --- a/en/routing.md +++ b/en/routing.md @@ -107,9 +107,9 @@ server.get('*', (req, res) => { ## Fragmentation du code -La séparation du code, ou les parties chargées à la volée de votre application, aide à réduire la quantité de ressources qui a besoin d'être téléchargée par le navigateur pour le rendu initial, et peut grandement améliorer le TTI (time-to-interactive) pour les grosses applications. Le but est de "charger uniquement ce qui est nécessaire" pour l'écran initial. +La fragmentation du code, ou les parties chargées à la volée de votre application, aide à réduire la quantité de ressources qui a besoin d'être téléchargée par le navigateur pour le rendu initial, et peut grandement améliorer le TTI (time-to-interactive) pour les grosses applications. Le but est de "charger uniquement ce qui est nécessaire" pour l'écran initial. -Vue permet de créer des composants asynchrones (concept de *first-class*), en les combinant avec [le support de webpack 2 pour l'utilisation de l'importation dynamique pour fragmenter le code](https://webpack.js.org/guides/code-splitting-async/), tout ce que vous avez à faire est : +Vue permet de créer des composants asynchrones en respectant le concept d'[objet de première classe](https://fr.wikipedia.org/wiki/Objet_de_premi%C3%A8re_classe). En les combinant avec [le support de webpack 2 pour l'utilisation de l'importation dynamique pour fragmenter le code](https://webpack.js.org/guides/code-splitting-async/), tout ce que vous avez à faire est : ``` js // changer ça : @@ -119,7 +119,7 @@ import Foo from './Foo.vue' const Foo = () => import('./Foo.vue') ``` -Cela fonctionnera dans n'importe quel scénario si vous êtes en train de faire une application Vue uniquement pour le côté client. Toutefois, il y aura certaines limitations en l'utilisant dans du SSR. Premièrement, il faut *résoudre* tous les composants asynchrones à l'avance sur le serveur avant de faire le rendu, car sinon il y aura juste un emplacement vide dans le code HTML. Pour le côté client, il faut aussi faire cela avant de commencer l'hydratation des données, sinon il y aurait des erreurs d'incompatibilités sur le contenu. +Cela fonctionnera dans n'importe quel scénario si vous êtes en train de faire une application Vue uniquement pour le côté client. Toutefois, il y aura certaines limitations en l'utilisant dans du SSR. Premièrement, il faut résoudre tous les composants asynchrones à l'avance sur le serveur avant de faire le rendu, car sinon il y aura juste un emplacement vide dans le code HTML. Pour le côté client, il faut aussi faire cela avant de commencer l'hydratation des données, sinon il y aurait des erreurs d'incompatibilités sur le contenu. Tout cela rend un peu compliqué l'utilisation des composants asynchrones à des endroits spécifiques dans votre application (nous allons probablement améliorer cela dans le futur). Toutefois, **cela fonctionne parfaitement si vous le faites au niveau de la route** - c.-à-d. d'utiliser les composants asynchrones dans la configuration des routes - car `vue-router` ira automatiquement résoudre les composants asynchrones nécessaires au bon fonctionnement de la route. Vous devez être sûr d'utiliser `router.onReady` sur le serveur et le client. Nous l'avons déjà fait pour le fichier d'entrée du serveur, il ne nous reste plus maintenant qu'à faire de même pour le fichier d'entrée du client : From c55d5d420d091663081eb00ddb5be9ab6b82354c Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 6 May 2017 10:35:12 +0200 Subject: [PATCH 5/8] fix "fragmentation" to "scission du code" --- en/SUMMARY.md | 2 +- en/routing.md | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/en/SUMMARY.md b/en/SUMMARY.md index bb5e3e96..cb7b6d1b 100644 --- a/en/SUMMARY.md +++ b/en/SUMMARY.md @@ -1,7 +1,7 @@ - [Utilisation de base](basic.md) - [Écrire du code universel (En)](universal.md) - [Structure de code (En)](structure.md) -- [Routage et fragmentation](routing.md) +- [Routage et scission du code](routing.md) - [Pré-chargement et état (En)](data.md) - [Hydratation côté client (En)](hydration.md) - [Introduction à l'empaquetage (En)](bundle-renderer.md) diff --git a/en/routing.md b/en/routing.md index 9d1a6815..81093510 100644 --- a/en/routing.md +++ b/en/routing.md @@ -1,4 +1,4 @@ -# Routage et fragmentation +# Routage et scission du code ## Routage avec `vue-router` @@ -105,11 +105,11 @@ server.get('*', (req, res) => { }) ``` -## Fragmentation du code +## Scission du code -La fragmentation du code, ou les parties chargées à la volée de votre application, aide à réduire la quantité de ressources qui a besoin d'être téléchargée par le navigateur pour le rendu initial, et peut grandement améliorer le TTI (time-to-interactive) pour les grosses applications. Le but est de "charger uniquement ce qui est nécessaire" pour l'écran initial. +La scission du code, ou les parties chargées à la volée de votre application, aide à réduire la quantité de ressources qui a besoin d'être téléchargée par le navigateur pour le rendu initial, et peut grandement améliorer le TTI (time-to-interactive) pour les grosses applications. Le but est de "charger uniquement ce qui est nécessaire" pour l'écran initial. -Vue permet de créer des composants asynchrones en respectant le concept d'[objet de première classe](https://fr.wikipedia.org/wiki/Objet_de_premi%C3%A8re_classe). En les combinant avec [le support de webpack 2 pour l'utilisation de l'importation dynamique pour fragmenter le code](https://webpack.js.org/guides/code-splitting-async/), tout ce que vous avez à faire est : +Vue permet de créer des composants asynchrones en respectant le concept d'[objet de première classe](https://fr.wikipedia.org/wiki/Objet_de_premi%C3%A8re_classe). En les combinant avec [le support de webpack 2 pour l'utilisation de l'importation dynamique pour scinder le code](https://webpack.js.org/guides/code-splitting-async/), tout ce que vous avez à faire est : ``` js // changer ça : From 6ef29621c41230601c2979bac267e9e781e53ed9 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 6 May 2017 10:38:48 +0200 Subject: [PATCH 6/8] Fix english double quotes for french ones --- en/routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/routing.md b/en/routing.md index 81093510..be449df0 100644 --- a/en/routing.md +++ b/en/routing.md @@ -107,7 +107,7 @@ server.get('*', (req, res) => { ## Scission du code -La scission du code, ou les parties chargées à la volée de votre application, aide à réduire la quantité de ressources qui a besoin d'être téléchargée par le navigateur pour le rendu initial, et peut grandement améliorer le TTI (time-to-interactive) pour les grosses applications. Le but est de "charger uniquement ce qui est nécessaire" pour l'écran initial. +La scission du code, ou les parties chargées à la volée de votre application, aide à réduire la quantité de ressources qui a besoin d'être téléchargée par le navigateur pour le rendu initial, et peut grandement améliorer le TTI (time-to-interactive) pour les grosses applications. Le but est de « charger uniquement ce qui est nécessaire » pour l'écran initial. Vue permet de créer des composants asynchrones en respectant le concept d'[objet de première classe](https://fr.wikipedia.org/wiki/Objet_de_premi%C3%A8re_classe). En les combinant avec [le support de webpack 2 pour l'utilisation de l'importation dynamique pour scinder le code](https://webpack.js.org/guides/code-splitting-async/), tout ce que vous avez à faire est : From eaf52d1134abd3a56f93d7038c875b20cf877f88 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 6 May 2017 11:35:35 +0200 Subject: [PATCH 7/8] Fix "Promise", "avec du SSR", messages d'erreurs, virgule --- en/routing.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/en/routing.md b/en/routing.md index be449df0..82b857fb 100644 --- a/en/routing.md +++ b/en/routing.md @@ -54,7 +54,7 @@ import { createApp } from './app' export default context => { // vu qu'il peut potentiellement avoir des composants ou des hooks - // de routes asynchrones, on retourne une Promise de telle sorte que + // de routes asynchrones, on retourne une Promesse (« Promise ») de telle sorte que // le serveur patiente jusqu'à ce que tout soit prêt pour le rendu. return new Promise((resolve, reject) => { const { app, router } = createApp() @@ -71,7 +71,7 @@ export default context => { reject({ code: 404 }) } - // la Promise doit résoudre l'instance de l'application, qui pourra + // la Promise doit résoudre l'instance de l'application qui pourra // ensuite être rendue resolve(app) }, reject) @@ -93,9 +93,9 @@ server.get('*', (req, res) => { renderer.renderToString(app, (err, html) => { if (err) { if (err.code === 404) { - res.status(404).end('Page not found') + res.status(404).end('Page non trouvée') } else { - res.status(500).end('Internal Server Error') + res.status(500).end('Erreur interne du serveur') } } else { res.end(html) @@ -119,7 +119,7 @@ import Foo from './Foo.vue' const Foo = () => import('./Foo.vue') ``` -Cela fonctionnera dans n'importe quel scénario si vous êtes en train de faire une application Vue uniquement pour le côté client. Toutefois, il y aura certaines limitations en l'utilisant dans du SSR. Premièrement, il faut résoudre tous les composants asynchrones à l'avance sur le serveur avant de faire le rendu, car sinon il y aura juste un emplacement vide dans le code HTML. Pour le côté client, il faut aussi faire cela avant de commencer l'hydratation des données, sinon il y aurait des erreurs d'incompatibilités sur le contenu. +Cela fonctionnera dans n'importe quel scénario si vous êtes en train de faire une application Vue uniquement pour le côté client. Toutefois, il y aura certaines limitations en l'utilisant avec du SSR. Premièrement, il faut résoudre tous les composants asynchrones à l'avance sur le serveur avant de faire le rendu, car sinon il y aura juste un emplacement vide dans le code HTML. Pour le côté client, il faut aussi faire cela avant de commencer l'hydratation des données, sinon il y aurait des erreurs d'incompatibilités sur le contenu. Tout cela rend un peu compliqué l'utilisation des composants asynchrones à des endroits spécifiques dans votre application (nous allons probablement améliorer cela dans le futur). Toutefois, **cela fonctionne parfaitement si vous le faites au niveau de la route** - c.-à-d. d'utiliser les composants asynchrones dans la configuration des routes - car `vue-router` ira automatiquement résoudre les composants asynchrones nécessaires au bon fonctionnement de la route. Vous devez être sûr d'utiliser `router.onReady` sur le serveur et le client. Nous l'avons déjà fait pour le fichier d'entrée du serveur, il ne nous reste plus maintenant qu'à faire de même pour le fichier d'entrée du client : From b95edcd7a971813bc1904db132ba526fae8b11f3 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 6 May 2017 11:38:39 +0200 Subject: [PATCH 8/8] Fix "injection ..." --- en/routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/routing.md b/en/routing.md index 82b857fb..e7746cf5 100644 --- a/en/routing.md +++ b/en/routing.md @@ -36,7 +36,7 @@ export function createApp () { const router = createRouter() const app = new Vue({ - // injection du routeur dans l'instance de Vue + // injecte le routeur dans l'instance de Vue router, render: h => h(App) })