Skip to content

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

Merged
merged 9 commits into from
Apr 11, 2017
Merged

ssr.md #45

merged 9 commits into from
Apr 11, 2017

Conversation

MachinisteWeb
Copy link
Member

@MachinisteWeb MachinisteWeb commented Mar 16, 2017

C'est tout bon pour relire cette PR !

Signed-off-by: Bruno Lesieur <[email protected]>
Signed-off-by: Bruno Lesieur <[email protected]>
Signed-off-by: Bruno Lesieur <[email protected]>
Copy link
Member

@sylvainpolletvillard sylvainpolletvillard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1ère relecture


<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.

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


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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

où la SEO


### SEO
### La SEO

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


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.

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


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.

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

- 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)

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

Copy link
Member Author

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.


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.

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

Copy link
Member Author

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/


- [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)

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

- [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.

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


## 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.

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

@MachinisteWeb
Copy link
Member Author

MachinisteWeb commented Mar 27, 2017

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.

@MachinisteWeb
Copy link
Member Author

J'attends au moins une autre relecture (@forresst ?) et la validation de @sylvainpolletvillard pour merger ça

@forresst
Copy link

forresst commented Apr 6, 2017

@haeresis je pourrais relire cela la semaine prochaine. J'ai pas trop de temps cette semaine

Copy link

@forresst forresst left a 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


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.
Copy link

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


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.
Copy link

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


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.
Copy link

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


## 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 :
Copy link

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" ?

Copy link
Member Author

@MachinisteWeb MachinisteWeb Apr 7, 2017

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

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 :
Copy link

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

// 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.
Copy link

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
Copy link

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


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 :
Copy link

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


## Build Process, Routing, and Vuex State Hydration
## Processus de build, routage, et hydratation d'état de Vuex
Copy link

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"


## 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.
Copy link

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]>
@MachinisteWeb
Copy link
Member Author

MachinisteWeb commented Apr 7, 2017

Merci @forresst !!!

J'attends vos validations ou vos re-retours haha

@MachinisteWeb
Copy link
Member Author

@forresst, bon pour toi ?

@MachinisteWeb MachinisteWeb requested review from yann-yinn and removed request for yann-yinn April 10, 2017 11:44
Copy link

@forresst forresst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

C'est ok !

@sylvainpolletvillard sylvainpolletvillard merged commit 5e9d8b2 into vuejs-fr:master Apr 11, 2017
@MachinisteWeb MachinisteWeb deleted the french_srr branch April 11, 2017 14:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants