Angular Universal vs. Prerender.io

Si vous êtes un développeur angulaire, vous savez que le référencement est une situation délicate. Et si vous êtes comme nous, vous avez probablement cherché sur Google deux solutions principales. Dans cet article, nous souhaitons expliquer la complexité et l’efficacité de chaque processus. Notez que tout cela est basé sur nos expériences. Si vous pensez le contraire, n'hésitez pas à nous contacter!

1. Universel angulaire

Documentation: https://angular.io/guide/universal
Complexité: 7/10
Efficacité: 6/10

Dans notre cas d'utilisation, nous n'avons pas utilisé de démarreur universel angulaire. Nous avions déjà construit notre site Web sans site (projet Angular 7). Et bien que le processus ne soit pas trop long à intégrer dans votre projet Angular existant, il faut certainement du temps pour comprendre ce qui se passe. Pour simplifier une explication, Angular Universal crée deux versions de votre application. L’application «serveur» qui convertit vos pages en HTML statique. Cela se produit d’abord et c’est ce que les robots SEO vont utiliser. L'autre version est l'application "navigateur". Ceci est votre application angulaire régulière, dynamique et entièrement fonctionnelle. Universal échange votre application rendue côté serveur avec votre application de navigateur une fois son chargement terminé. Ainsi, vous pouvez voir un léger tremblement, en particulier sur des vitesses plus faibles.

Comme il s’agit surtout d’un article sur la raison pour laquelle il est préférable d’utiliser l’un sur l’autre, nous n’écrirons pas trop de code. Veuillez consulter le lien de documentation fourni ci-dessus.

Cependant, nous souhaitons faire des commentaires sur les problèmes auxquels nous avons été confrontés et sur ce que nous devions faire pour les résoudre:
1. Ajoutez les scripts suggérés par la doc dans votre package.json. Le placer dans la cible du serveur angular.json provoquera une erreur.
2. Pour votre fichier server.ts, lorsque vous importez votre AppServerModuleNgFactory, récupérez-le à partir de votre fichier "./dist/server/main" et non pas du fichier "./dist/server/main.bundle".
3. Si vous utilisez SCSS pour votre projet, veillez à ajouter cet extrait de code sous la cible du serveur angular.json. Sinon, cela générerait des erreurs lors de la construction de la cible du serveur.

"stylePreprocessorOptions": {“includePaths”: [“src / scss”]}

4. Assurez-vous également de bien vérifier vos chemins de sortie pour votre cible de construction habituelle et votre cible de serveur. Le chemin de sortie de la construction doit être comme dist / nom-projet / navigateur et le chemin de sortie du serveur doit être comme dist / nom-projet / serveur

Une fois que nous avons terminé, nous pouvions voir tout le code de notre page à partir de «Voir le source de la page» sur chrome. Nous avons également intégré des balises méta dynamiques (à l'aide du méta-service) pour notre projet et nous pouvons les voir lorsque nous inspectons notre page. Alors maintenant, voici les avantages et les inconvénients après avoir déployé notre site et indexé nos pages sur Google:

Avantages
- Toutes nos pages étaient consultables sur Google
- Les robots Google ont réussi à extraire du texte de nos pages

Les inconvénients
- Le texte tiré avec Google bots était un texte aléatoire de nos pages (comme les noms des liens, des éléments sur le pied de page, des descriptions alt sur les images, le texte du corps, etc.)
- Si vous essayez de servir des itinéraires express personnalisés, vous allez avoir des problèmes. Il est fort probable que vous fassiez mieux de créer une autre instance de serveur pour vos itinéraires personnalisés.

2. Prérender.io

Documentation: https://prerender.io/documentation
Complexité: 2/10
Efficacité: 7/10

Avant d’essayer Angular Universal, nous avions essayé Prerender.io. Ceci est certainement la route avec le moins de tracas. Pour implémenter cela d’une manière qui fonctionne avec Google et les Bing Bots, il n’exigeait que plusieurs lignes de code et s’enregistrait sur leur site pour obtenir un jeton. Et dans cet exemple, nous utilisons un serveur Express Node:

var prerender = require (‘prerender-node’). set (‘prerenderToken’, ‘YOUR_TOKEN’);
prerender.crawlerUserAgents.push (‘googlebot’);
prerender.crawlerUserAgents.push ('bingbot');
prerender.crawlerUserAgents.push ('yandex');
app.use (prérender);

Si vous utilisez Express / Node, assurez-vous que la ligne app.use (prérender) est située au-dessus de votre middleware express.static susceptible de servir votre répertoire dist.

Avec prerender.io, il fera essentiellement la même chose avec universal. Il mettra en cache un fichier html statique de vos pages et les transmettra aux robots Google lorsqu'ils parcourront votre site.

C'est donc très facile et fonctionne bien avec les SPA, mais était-ce efficace?

Avantages
- Mise en place très rapide
- La version gratuite peut mettre en cache jusqu'à 250 pages
- Les résultats de recherche Google de nos pages sont tous conformes à la description donnée dans le méta-service.

Les inconvénients
- Jusqu'à 250 pages gratuites paraissent, la mise en cache peut être effectuée sur plusieurs versions de votre URL (en utilisant notre site à titre d'exemple) https://www.brewcrewlabs.com et https://brewcrewlabs.com. Le niveau suivant est 20 000 pages pour 15 $ / mois.

3. Le verdict

Le verdict est que l'universel angulaire n'est pas encore prêt. Prerender.io est certes plus simple et efficace, bien que nous puissions peut-être améliorer notre référencement. Si vous n’envisagez pas de produire une abondance de pages chaque semaine, Prerender.io peut être la solution pour vous. Bien que Angular universal fonctionne à certains égards, il faut beaucoup plus de travail sur les jambes pour travailler au même niveau que Prerender.io. Peut-être que nous ne connaissons pas la sauce secrète d’Angular Universal. Si vous en connaissez, faites-nous savoir votre expérience!

J'espère que cet article a aidé quelqu'un d'autre dans une situation similaire!