(
Illustration )
Il était une fois Il y a quelques années, alors que je commençais à peine à travailler avec le Web en Java, nous travaillions avec JSP. La page entière a été générée sur le serveur et envoyée au client. Mais la question s'est alors posée que la réponse est venue trop longtemps ...
Nous avons commencé à utiliser une approche dans laquelle un modèle de page vide est donné, et toutes les données sont déjà progressivement chargées par Ajax. Tout le monde était content, montraient les pages. Nous n'avons pas réalisé ce que nous avons fait pour nous-mêmes, car la RSE affecte négativement l'optimisation des moteurs de recherche et les performances sur les appareils mobiles. Mais j'ai de nouveau entendu parler du support SSR avec les frameworks JS.
Et que se passe-t-il, l'histoire se répète?Quels sont les principes de fonctionnement de la RSS?1. Pré-rendu. Dans le cas le plus simple, N fichiers HTML sont générés, qui sont placés sur le serveur et retournés tels quels - c'est-à-dire que statique est retourné, nous ne générons rien pendant la requête.
2. Comme dans le cas de JSP, le serveur génère du HTML complet avec tout le contenu et le renvoie au client. Mais, afin de ne pas générer de page pour chaque requête (il peut y en avoir un million et notre serveur va se plier), ajoutons un cache proxy. Par exemple, vernis.
Quand chacune de ces méthodes peut-elle s'appliquer:1. Quand est-il judicieux de générer un tas de fichiers HTML? Évidemment, lorsque les données du site changent un peu moins que jamais. Par exemple, le site Web de l'entreprise d'un stand de réparation de chaussures, qui est au coin de la rue (oui, l'oncle qui change de talon dans un décrochage de 2x2 mètres, voulait également le site Web de l'entreprise - et, bien sûr, avec la page de mission de l'entreprise). Pour un tel site, vous n'avez même pas à vous soucier des frameworks, SSR et autres sifflets, mais ceci est un exemple sphérique. Et si nous avons un blog avec 1 000 articles? Parfois, nous les mettons à jour, parfois nous en ajoutons de nouveaux. Générez 1k + fichiers statiques ... Quelque chose ne va pas. Et si nous changeons la publication, nous devons régénérer un certain fichier. Hmm ...
2. Et ici, la deuxième méthode nous convient. Où nous générons la première fois à la volée, puis mettons en cache la réponse dans le service proxy. Le temps de mise en cache peut être d'une heure / deux / jour - peu importe. Si nous avons 10 000 appels par heure et par poste (incroyable, non?), Alors seule la première demande parviendra au serveur. Le reste recevra une copie en cache en réponse, et notre serveur est plus susceptible de vivre. En cas de mise à jour d'une publication, il suffit de réinitialiser l'enregistrement mis en cache afin que la page suivante génère une page réelle.
Des mots à l'action:
Bonjour repo mondial.
0) générez bonjour le monde
Pour un démarrage rapide, la communauté Nuxt a préparé
des modèles de base , vous pouvez installer l'un d'eux avec la commande:
$ vue init <template-name> <project-name>
Par défaut, un modèle démarré est proposé, et nous le prendrons pour notre exemple. Bien que dans une application réelle, nous avons choisi un modèle express. Appelons le projet simple:
$ vue init nuxt-community/starter-template habr-nuxt-example $ cd habr-nuxt-example $ yarn # npm install, $ yarn dev
D'accord , nous avons généré bonjour le monde. En parcourant l'url, vous pouvez voir la page générée:
1) Webpack et peluches
Nuxt prêt à l'emploi a configuré des webpacks avec prise en charge d'ES6 (babel-loader), des composants à fichier unique Vue (vue-loader), ainsi que SCSS, JSX et plus encore.
Si ces capacités ne sont pas suffisantes, la configuration du webpack peut être étendue. Nous allons à nuxt.config.js, et dans build.extend nous avons la possibilité de modifier la configuration.
Par exemple, nous ajouterons une doublure de style par analogie avec le linting de code - un point important, à notre avis, pour maintenir une base de code uniforme. C'est une bonne habitude qui permettra d'éviter de nombreux pièges.
Un exemple d'extension de configuration (connexion d'un fichier de configuration pour une femme de chambre basée sur une variable d'environnement):
config.plugins.push( new StylelintPlugin({ files: [ '**/*.vue', 'assets/scss/**/*.scss' ], configFile: './.stylelintrc.dev.js' }) )
D'autres modifications peuvent être consultées dans le référentiel par
tag , ces modifications nous aideront à garder les styles en ordre.
Et un exemple de fichier de configuration linter: nous utilisons Standard JS, comme solution généralement acceptée dans Vue / Nuxt:
... extends: [ - 'plugin:vue/essential' + 'standard', + 'plugin:vue/recommended' ], …
2) Pour un exemple de travail avec des données, nous utiliserons
cette API :
Connectez Axios en tant que plugin, créez un nouveau fichier dans le répertoire des plugins:
import * as axios from 'axios' let options = {}
Et un exemple d'utilisation:
import axios from '~/plugins/axios' export default { async asyncData ({ params }) { const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts') return { data } } }
Sinon en navet par
étiquette .
Numéros de téléchargement:
1) SSR + vernis
Première demande:
Deuxièmement:
2) Sans SSR
La deuxième demande de fastley
Une page vierge est arrivée rapidement, mais il a fallu 2 secondes pour générer du contenu dessus.
Conclusion
Quel est le résultat? Nous avons compris comment obtenir une application SSR de démarrage à configuration minimale. Ils ont ajouté Linting pour préserver le style de code dès le début de la vie du projet et ont également décrit l'architecture générale. Vous pouvez écrire votre googol.
