|
| 1 | +# Référence de l'API |
| 2 | + |
| 3 | +## `createRenderer([options])` |
| 4 | + |
| 5 | +Crée une instance de [`Renderer`](#class-renderer) avec des [options](#renderer-options) optionnelles. |
| 6 | + |
| 7 | +``` js |
| 8 | +const { createRenderer } = require('vue-server-renderer') |
| 9 | +const renderer = createRenderer({ ... }) |
| 10 | +``` |
| 11 | + |
| 12 | +## `createBundleRenderer(bundle[, options])` |
| 13 | + |
| 14 | +Crée une instance de [`BundleRenderer`](#class-bundlerenderer) avec un paquetage serveur et des [options](#renderer-options) optionnelles. |
| 15 | + |
| 16 | +``` js |
| 17 | +const { createBundleRenderer } = require('vue-server-renderer') |
| 18 | +const renderer = createBundleRenderer(serverBundle, { ... }) |
| 19 | +``` |
| 20 | + |
| 21 | +L'argument `serverBundle` peut être l'un des éléments suivants : |
| 22 | + |
| 23 | +- Un chemin absolu pour générer un fichier de paquetage (`.js` ou `.json`). Doit commencer par `/` pour être considéré comme un chemin de fichier. |
| 24 | + |
| 25 | +- Un objet de paquetage généré par webpack + `vue-server-renderer/server-plugin`. |
| 26 | + |
| 27 | +- Une chaîne de caractères de code JavaScript (non recommandé). |
| 28 | + |
| 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. |
| 30 | + |
| 31 | +## `Class: Renderer` |
| 32 | + |
| 33 | +- #### `renderer.renderToString(vm[, context], callback)` |
| 34 | + |
| 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. |
| 36 | + |
| 37 | +- #### `renderer.renderToStream(vm[, context])` |
| 38 | + |
| 39 | + Fait le rendu d'une instance de Vue sous forme de flux. L'objet de contexte est optionnel. Voir l'[Envoi par flux](./streaming.md) pour plus de détails. |
| 40 | + |
| 41 | +## `Class: BundleRenderer` |
| 42 | + |
| 43 | +- #### `bundleRenderer.renderToString([context, ]callback)` |
| 44 | + |
| 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. |
| 46 | + |
| 47 | +- #### `bundleRenderer.renderToStream([context])` |
| 48 | + |
| 49 | + Fait le rendu d'un paquetage sous forme de flux. L'objet de contexte est optionnel. Voir l'[Envoi par flux](./streaming.md) pour plus de détails. |
| 50 | + |
| 51 | +## Options de `Renderer` |
| 52 | + |
| 53 | +- #### `template` |
| 54 | + |
| 55 | + Fournit un modèle de page pour la page HTML complète. Le modèle de page devrait contenir en commentaire `<!--vue-ssr-outlet-->` qui permet de définir l'emplacement du contenu de chaque rendu de l'application. |
| 56 | + |
| 57 | + Le modèle de page supporte également l'interpolation basique en utilisant le contexte du rendu : |
| 58 | + |
| 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é. |
| 61 | + |
| 62 | + Le modèle de page injecte automatiquement le contenu quand certaines données sont trouvées dans le contexte du rendu : |
| 63 | + |
| 64 | + - `context.head`: (string) n'importe quelle balise d'entête qui devrait être injectée dans la balise `<head>` de la page. |
| 65 | + |
| 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. |
| 67 | + |
| 68 | + - `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. |
| 69 | + |
| 70 | + En plus, quand `clientManifest` est fourni, le modèle de page injecte automatiquement les éléments suivants : |
| 71 | + |
| 72 | + - 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. |
| 74 | + |
| 75 | + Vous pouvez désactiver toutes ces injections en passant `inject: false` au moteur de rendu. |
| 76 | + |
| 77 | + Voir également : |
| 78 | + |
| 79 | + - [Utiliser un modèle de page](./basic.md#utiliser-un-modele-de-page) |
| 80 | + - [Injection manuelle des fichiers](./build-config.md#injection-manuelle-des-fichiers) |
| 81 | + |
| 82 | +- #### `clientManifest` |
| 83 | + |
| 84 | + - 2.3.0+ |
| 85 | + |
| 86 | + Fournit un objet de build de manifeste généré par `vue-server-renderer/client-plugin`. Le manifeste client fournit le paquetage de moteur de rendu avec ses propres informations pour l'injection automatique de fichiers dans le modèle de page HTML. Pour plus de détails, consultez [Générer le `clientManifest`](./build-config.md#generer-le-clientmanifest). |
| 87 | + |
| 88 | +- #### `inject` |
| 89 | + |
| 90 | + - 2.3.0+ |
| 91 | + |
| 92 | + Contrôle la manière d'exécuter des injections automatiques en utilisant `template`. Par défaut à `true`. |
| 93 | + |
| 94 | + Voir aussi : [Injection manuelle des fichiers](./build-config.md#injection-manuelle-des-fichiers). |
| 95 | + |
| 96 | +- #### `shouldPreload` |
| 97 | + |
| 98 | + - 2.3.0+ |
| 99 | + |
| 100 | + Une fonction pour contrôler quels fichiers doivent avoir une ressource d'indice `<link rel="preload">` de générée. |
| 101 | + |
| 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. |
| 103 | + |
| 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` : |
| 105 | + |
| 106 | + ``` js |
| 107 | + const renderer = createBundleRenderer(bundle, { |
| 108 | + template, |
| 109 | + clientManifest, |
| 110 | + shouldPreload: (file, type) => { |
| 111 | + // le type est déduit en se basant sur l'extension du fichier. |
| 112 | + // https://fetch.spec.whatwg.org/#concept-request-destination |
| 113 | + if (type === 'script' || type === 'style') { |
| 114 | + return true |
| 115 | + } |
| 116 | + if (type === 'font') { |
| 117 | + // pré-charger uniquement les polices woff2 |
| 118 | + return /\.woff2$/.test(file) |
| 119 | + } |
| 120 | + if (type === 'image') { |
| 121 | + // charger uniquement les images importantes |
| 122 | + return file === 'hero.jpg' |
| 123 | + } |
| 124 | + } |
| 125 | + }) |
| 126 | + ``` |
| 127 | + |
| 128 | +- #### `runInNewContext` |
| 129 | + |
| 130 | + - 2.3.0+ |
| 131 | + - seulement utilisée avec `createBundleRenderer` |
| 132 | + - Requiert : `boolean | 'once'` (`'once'` est seulement supporté dans la 2.3.1+) |
| 133 | + |
| 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. |
| 135 | + |
| 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. |
| 137 | + |
| 138 | + > 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+. |
| 139 | +
|
| 140 | + 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. |
| 141 | + |
| 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 : |
| 143 | + |
| 144 | + 1. Les dépendances qui modifient l'objet `global` (ex. polyfills) ne peuvent être externalisées dans ce mode, |
| 145 | + 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. |
| 146 | + |
| 147 | + Voir aussi : [Structure de code](./structure.md) |
| 148 | + |
| 149 | +- #### `basedir` |
| 150 | + |
| 151 | + - 2.2.0+ |
| 152 | + - seulement utilisée avec `createBundleRenderer` |
| 153 | + |
| 154 | + Déclarer explicitement le dossier de base du paquetage serveur afin de résoudre les dépendances `node_modules`. Cela est nécessaire si le fichier de paquetage généré est placé à un endroit différent de là où les dépendances externes npm sont installées, ou si `vue-server-renderer` est lié à npm dans votre projet courant. |
| 155 | + |
| 156 | +- #### `cache` |
| 157 | + |
| 158 | + Fournit une implémentation de [Mise en cache au niveau du composant](./caching.md#mise-en-cache-au-niveau-du-composant). L'objet de cache doit implémenter l'interface suivante (utilisation des notations Flow) : |
| 159 | + |
| 160 | + ``` js |
| 161 | + type RenderCache = { |
| 162 | + get: (key: string, cb?: Function) => string | void; |
| 163 | + set: (key: string, val: string) => void; |
| 164 | + has?: (key: string, cb?: Function) => boolean | void; |
| 165 | + }; |
| 166 | + ``` |
| 167 | + |
| 168 | + Une utilisation typique est de passer un [objet de mise en cache qui supprime l'objet le plus récemment utilisé](https://github.com/isaacs/node-lru-cache) : |
| 169 | + |
| 170 | + ``` js |
| 171 | + const LRU = require('lru-cache') |
| 172 | + |
| 173 | + const renderer = createRenderer({ |
| 174 | + cache: LRU({ |
| 175 | + max: 10000 |
| 176 | + }) |
| 177 | + }) |
| 178 | + ``` |
| 179 | + |
| 180 | + Notez que cet objet de mise en cache doit au moins implémenter `get` et `set`. De plus `get` et `set` peuvent être optionnellement asynchrone s'ils acceptent en second argument une fonction de rappel. Cela permet à la mise en cache d'utiliser des APIs. Par ex. un client Redis : |
| 181 | + |
| 182 | + ``` js |
| 183 | + const renderer = createRenderer({ |
| 184 | + cache: { |
| 185 | + get: (key, cb) => { |
| 186 | + redisClient.get(key, (err, res) => { |
| 187 | + // gérer les erreur s'il y en a |
| 188 | + cb(res) |
| 189 | + }) |
| 190 | + }, |
| 191 | + set: (key, val) => { |
| 192 | + redisClient.set(key, val) |
| 193 | + } |
| 194 | + } |
| 195 | + }) |
| 196 | + ``` |
| 197 | + |
| 198 | +- #### `directives` |
| 199 | + |
| 200 | + Vous permet de fournir des implémentations côté serveur pour vos directives personnalisées : |
| 201 | + |
| 202 | + ``` js |
| 203 | + const renderer = createRenderer({ |
| 204 | + directives: { |
| 205 | + example (vnode, directiveMeta) { |
| 206 | + // transformer les vnode en directive de liaison de metadata |
| 207 | + } |
| 208 | + } |
| 209 | + }) |
| 210 | + ``` |
| 211 | + |
| 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. |
| 213 | + |
| 214 | +## Plugins webpack |
| 215 | + |
| 216 | +Les pluging webpack sont fournis en fichiers autonomes et devraient être requis en direct : |
| 217 | + |
| 218 | +``` js |
| 219 | +const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') |
| 220 | +const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') |
| 221 | +``` |
| 222 | + |
| 223 | +Les fichiers générés par défaut sont : |
| 224 | + |
| 225 | +- `vue-ssr-server-bundle.json` pour le plugin serveur, |
| 226 | +- `vue-ssr-client-manifest.json` pour le plugin client. |
| 227 | + |
| 228 | +Les noms de fichiers peuvent être personnalisés lors de la création des instances des plugins : |
| 229 | + |
| 230 | +``` js |
| 231 | +const plugin = new VueSSRServerPlugin({ |
| 232 | + filename: 'my-server-bundle.json' |
| 233 | +}) |
| 234 | +``` |
| 235 | + |
| 236 | +Voir la [Configuration de pré-compilation](./build-config.md) pour plus d'informations. |
0 commit comments