-
Notifications
You must be signed in to change notification settings - Fork 103
ssr.md #45
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ssr.md #45
Conversation
Signed-off-by: Bruno Lesieur <[email protected]>
Signed-off-by: Bruno Lesieur <[email protected]>
Signed-off-by: Bruno Lesieur <[email protected]>
Signed-off-by: Bruno Lesieur <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
1ère relecture
src/v2/guide/ssr.md
Outdated
|
||
<p class="tip">**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/vuejs.org).**</p>Before diving into SSR, let's explore what it actually does for you and when you might need it. | ||
Avant de plonger dans le SRR (pour *Server-side Rendering* soit Rendu côté serveur), explorons en quoi cela pourrait vous être utile et quand l'utiliser. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ajouter des guillemets autour de la traduction française
src/v2/guide/ssr.md
Outdated
|
||
This means if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary. | ||
Cela signifie que si vous avez du contenu qui s'affiche de manière asynchrone sur des pages ou la SEO est importante, le SSR devient nécessaire. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
où la SEO
src/v2/guide/ssr.md
Outdated
|
||
### SEO | ||
### La SEO |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
indiquer la signification de l'acronyme dans le titre ou dans le paragraphe
src/v2/guide/ssr.md
Outdated
|
||
Users might come to your site from a remote area with slow Internet - or just with a bad cell connection. In these cases, you'll want to minimize the number and size of requests necessary for users to see basic content. | ||
Les utilisateurs pourraient visiter votre site depuis des lieux avec une connexion Internet bas-débit – ou juste depuis une mauvaise connexion cellulaire. Dans ces cas, vous souhaitez minimiser le nombre et la taille des requêtes nécessaire à l'utilisateur pour afficher ce contenu minimal. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nécessaires
pour voir le contenu de base
src/v2/guide/ssr.md
Outdated
|
||
You can use [Webpack's code splitting](https://webpack.js.org/guides/code-splitting-require/) to avoid forcing users to download your entire application to view a single page, but it still won't be as performant as downloading a single, pre-rendered HTML file. | ||
Vous pouvez utiliser l'[outil Webpack de découpe de code](https://webpack.js.org/guides/code-splitting-require/) pour ne pas forcer l'utilisateur à télécharger votre application entière pour voir une seule page, mais cela ne sera jamais aussi performant que de télécharger une seule page de contenu HTML au rendu statique. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
laisser le terme original "code splitting" puisque la doc Webpack n'est pas disponible en français et que l'on se réfère à ce terme en anglais même dans les présentations françaises. On peut éventuellement mettre la traduction française entre parenthèses derrière.
une seule page HTML pré-rendue
src/v2/guide/ssr.md
Outdated
- Generic UI components (e.g. buttons, alerts, etc - at least those that accept content through props rather than slots/children) | ||
- Des composants statiques (c-à-d qu'il génère toujours le même HTML, aussi la fonction `serverCacheKey` à juste à retourner `true`) | ||
- Des composants de liste d'élément (dans de large liste, les mettre en cache peut significativement améliorer les performances) | ||
- Des composants d'interface utilisateur générique (c-à-d les boutons, alertes, etc — du moins ceux qui accepte leur contenu à travers les props plutôt que les slots/enfants) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Des composants génériques d'interface utilisateur
c-à-d.
etc.
ceux qui acceptent du contenu via les props
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Comme pour e. g. qui à toujours été remplacé par « ex : » je vais garder « c-à-d » sans le point. Je dis absoluement pas que c'est pas une bonne idée de mettre « p. ex. » où « c-à-d. » mais je préfère traité cela dans une PR global qui rechangerait rétroactivement toutes les occurrences si c'est vraiment génant.
En ce qui concerne c-à-d je pense que « c-à-d » ou « c.-à-d. » est acceptable mais pas « c.à-d » ou « c-à-d. » pour la logique globale.
src/v2/guide/ssr.md
Outdated
|
||
By now, you should understand the fundamental concepts behind server-side rendering. However, as you introduce a build process, routing, and vuex, each introduces its own considerations. | ||
Maintenant, vous devriez comprendre le concept fondamental derrière le rendu côté serveur. Cependant, introduire un processus de build, du routage et vuex introduit également son lot de considérations propres. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
à présent,
(à majuscule, mon clavier actuel ne me permet pas de récupérer cette lettre)
les concepts fondamentaux
Cependant, à mesure que vous introduisez
chacun introduit son propre lot de considérations
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pour ma part j'écris en Bépo : https://bepo.fr/wiki/Accueil
Ma petite exprérience perso : https://www.lesieur.name/bepo/
src/v2/guide/ssr.md
Outdated
|
||
- [vue-server-renderer docs](https://www.npmjs.com/package/vue-server-renderer#api): more details on topics covered here, as well as documentation of more advanced topics, such as [preventing cross-request contamination](https://www.npmjs.com/package/vue-server-renderer#why-use-bundlerenderer) and [adding a separate server build](https://www.npmjs.com/package/vue-server-renderer#creating-the-server-bundle) | ||
- [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0): the definitive example of integrating all major Vue libraries and concepts in a single application | ||
- [documentations de vue-server-renderer](https://www.npmjs.com/package/vue-server-renderer#api) : plus de détails sur les sujets que nous avons abordés ici, ainsi qu'une documentation de sujets plus avancés, comme [prévenir la contamination entre les requêtes](https://www.npmjs.com/package/vue-server-renderer#why-use-bundlerenderer) et [l'ajout d'un serveur de build séparé](https://www.npmjs.com/package/vue-server-renderer#creating-the-server-bundle) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Documentation de vue-server-renderer
une documentation sur les sujets plus avancés
empêcher la contamination
ajouter un serveur
src/v2/guide/ssr.md
Outdated
- [vue-server-renderer docs](https://www.npmjs.com/package/vue-server-renderer#api): more details on topics covered here, as well as documentation of more advanced topics, such as [preventing cross-request contamination](https://www.npmjs.com/package/vue-server-renderer#why-use-bundlerenderer) and [adding a separate server build](https://www.npmjs.com/package/vue-server-renderer#creating-the-server-bundle) | ||
- [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0): the definitive example of integrating all major Vue libraries and concepts in a single application | ||
- [documentations de vue-server-renderer](https://www.npmjs.com/package/vue-server-renderer#api) : plus de détails sur les sujets que nous avons abordés ici, ainsi qu'une documentation de sujets plus avancés, comme [prévenir la contamination entre les requêtes](https://www.npmjs.com/package/vue-server-renderer#why-use-bundlerenderer) et [l'ajout d'un serveur de build séparé](https://www.npmjs.com/package/vue-server-renderer#creating-the-server-bundle) | ||
- [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0): l'exemple définitif intégrant toutes les bibliothèques et concepts majeurs de Vue dans une application unique. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
l'exemple final
dans une seule application
src/v2/guide/ssr.md
Outdated
|
||
## Nuxt.js | ||
|
||
Properly configuring all the discussed aspects of a production-ready server-rendered app can be a daunting task. Luckily, there is an excellent community project that aims to make all of this easier: [Nuxt.js](https://nuxtjs.org/). Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. Better yet, you can even use it as a static site generator (with pages authored as single-file Vue components)! We highly recommend giving it a try. | ||
Configurer proprement tous les aspects dont nous avons discuté pour un rendu côté serveur près à la production peut être une tâche qui incombe. Forte heureusement, il y a un excellent projet communautaire dont le but est de rendre tout cela plus simple : [Nuxt.js](https://nuxtjs.org/). Nuxt.js est un framework de haut niveau construit au dessus de l'écosystème de Vue et qui fournit une expérience de développement organisée pour écrire des applications Vue universelle. Encore mieux, vous pouvez vous en servir comme générateur de site web statique (avec des pages réalisées au format monofichier des composants Vue) ! Nous vous recommandons grandement de l'essayer. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
prêt pour la production
peut être intimidant.
Fort heureusement
construit par-dessus l'écosystème
une expérience de développement toute tracée (ou "extrêmement guidée")
universelles
générateur de sites web statiques
avec des pages écrites comme composants Vue monofichiers
Merci @sylvainpolletvillard pour cette grosse relecture malgré un fichier relativement petit. J'ai tout gardé à l'exception de streaming que j'ai préférée remplacé par streamée (explication en com). J'ai gardé les infinitifs même si j'ai bien noté que l'autre manière était possible. |
J'attends au moins une autre relecture (@forresst ?) et la validation de @sylvainpolletvillard pour merger ça |
@haeresis je pourrais relire cela la semaine prochaine. J'ai pas trop de temps cette semaine |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Beau travail, j'ai pu le relire plus tôt que prévu.
Quelques remarques mais rien de bien méchant
src/v2/guide/ssr.md
Outdated
|
||
Users might come to your site from a remote area with slow Internet - or just with a bad cell connection. In these cases, you'll want to minimize the number and size of requests necessary for users to see basic content. | ||
Les utilisateurs pourraient visiter votre site depuis des lieux avec une connexion Internet bas-débit – ou juste depuis une mauvaise connexion cellulaire. Dans ces cas, vous souhaitez minimiser le nombre et la taille des requêtes nécessaires à l'utilisateur pour voir le contenu de base. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
avec une connexion Internet bas-débit (ou juste depuis une mauvaise connexion cellulaire).
Mettre la deuxième partie entre parenthèses
src/v2/guide/ssr.md
Outdated
|
||
For some demographics or areas of the world, using a computer from 1998 to access the Internet might be the only option. While Vue only works with IE9+, you may still want to deliver basic content to those on older browsers - or to hipster hackers using [Lynx](http://lynx.browser.org/) in the terminal. | ||
Pour certaines populations ou endroits du monde, utiliser un ordinateur de 1998 pour accéder à Internet pourrait être la seule option. Puisque Vue ne fonctionne qu'avec IE9+, vous pourriez vouloir délivrer un contenu de base à ceux sur des anciens navigateurs — ou pour les hackers hipsters utilisant [Lynx](http://lynx.browser.org/) depuis un terminal. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
vous pourriez vouloir délivrer un contenu de base pour ceux qui sont sur des anciens navigateurs (ou pour les hackers hipsters utilisant Lynx depuis un terminal).
pour ceux qui sont : proposition
mettre la deuxième partie entre parenthèses
src/v2/guide/ssr.md
Outdated
|
||
If you're using Webpack, you can easily add prerendering with the [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin). It's been extensively tested with Vue apps - and in fact, the creator is a member of the Vue core team. | ||
Si vous utilisez Webpack, vous pouvez facilement ajouter le pré-rendu avec le plugin [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin). Il a beaucoup été testé avec des applications Vue — en fait, son créateur est un membre de l'équipe du coeur de Vue. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Il a beaucoup été testé avec des applications Vue (en fait, son créateur est un membre de l'équipe de base de Vue).
core team : se traduit par "équipe de base" ou "équipe centrale"
deuxième partie entre parenthèses
src/v2/guide/ssr.md
Outdated
|
||
## Hello World | ||
|
||
If you've gotten this far, you're ready to see SSR in action. It sounds complex, but a simple node script demoing the feature requires only 3 steps: | ||
Si vous êtes arrivé jusqu'ici, vous êtes prêt pour voir le SSR en action. Cela semble complexe, mais un simple script Node.js peut présenter la fonctionnalité en seulement 3 étapes : |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pourquoi tu as remplacé "node" par "Node.js" ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Je vais faire une PR, parce que c'est de quoi il s'agit un simple Script Node.js mais ça me semble pas clair. https://nodejs.org/en/
PR : vuejs#864
src/v2/guide/ssr.md
Outdated
renderer.renderToString(app, function (error, html) { | ||
if (error) throw error | ||
console.log(html) | ||
// => <p server-rendered="true">hello world</p> | ||
}) | ||
``` | ||
|
||
Not so scary, right? Of course, this example is much simpler than most applications. We don't yet have to worry about: | ||
Pas si effrayant, non ? Bien sûr, cet exemple est plus simple que pour la plupart des applications. Nous n'avons pas encore à nous préoccuper de : |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nous préoccuper ˜de˜ :
le "de" n'est pas utile, car tu as mis "de", "du" dans la liste qui suit
src/v2/guide/ssr.md
Outdated
// version can take over once it loads. | ||
// L'instance de Vue principale doit être retournée et avoir | ||
// un nœud racine avec l'id « app », afin que la version côté | ||
// client puisse prendre le relais. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
client puisse prendre le relais une fois qu'elle est chargée.
@@ -158,129 +158,129 @@ Then to get it working with server-side rendering, there's just one more step - | |||
var fs = require('fs') | |||
var path = require('path') | |||
|
|||
// Define global Vue for server-side app.js | |||
// Définir Vue de manière globale pour app.js côté serveur |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Perso je préfére aussi le présent de l'indicatif plutôt que l'infinitif
src/v2/guide/ssr.md
Outdated
|
||
Then to get it working with server-side rendering, there's just one more step - the web server: | ||
Ensuite, pour le faire fonctionner avec du rendu côté serveur, il y a juste une étape de plus — le serveur web : |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
juste une étape de plus (le serveur web) :
deuxième partie entre parenthèses
src/v2/guide/ssr.md
Outdated
|
||
## Build Process, Routing, and Vuex State Hydration | ||
## Processus de build, routage, et hydratation d'état de Vuex |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Processus de build, routage et hydratation d'état de Vuex
enlever la dernière virgule entre "routage" et "et"
src/v2/guide/ssr.md
Outdated
|
||
## Nuxt.js | ||
|
||
Properly configuring all the discussed aspects of a production-ready server-rendered app can be a daunting task. Luckily, there is an excellent community project that aims to make all of this easier: [Nuxt.js](https://nuxtjs.org/). Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. Better yet, you can even use it as a static site generator (with pages authored as single-file Vue components)! We highly recommend giving it a try. | ||
Configurer proprement tous les aspects dont nous avons discuté pour un rendu côté serveur près à la production peut être intimidant. Fort heureusement, il y a un excellent projet communautaire dont le but est de rendre tout cela plus simple : [Nuxt.js](https://nuxtjs.org/). Nuxt.js est un framework de haut niveau construit par-dessus l'écosystème de Vue et qui fournit une expérience de développement toute tracée pour écrire des applications Vue universelle. Encore mieux, vous pouvez vous en servir comme générateur de sites web statiques (avec des pages écrites comme composants Vue monofichiers) ! Nous vous recommandons grandement de l'essayer. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
avec des pages écrites comme *des composants Vue monofichiers
Signed-off-by: Bruno Lesieur <[email protected]>
Merci @forresst !!! J'attends vos validations ou vos re-retours haha |
@forresst, bon pour toi ? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
C'est ok !
C'est tout bon pour relire cette PR !