Comment utilisez-vous React.js pour le référencement?

Les articles sur React.js comme pour souligner, que React.js est idéal pour des applications de référencement. Malheureusement, je n'ai jamais lu, comment vous le faites réellement. Vous _escaped_fragment_ simplement _escaped_fragment_ comme dans https://developers.google.com/webmasters/ajax-crawling/docs/getting- _escaped_fragment_ et laissez React rendre la page sur le serveur, lorsque l'URL contient _escaped_fragment_ , ou y _escaped_fragment_ -il plus? ?

Être capable de ne pas compter sur _escaped_fragment_ serait génial, car probablement tous les sites potentiellement ronds (par exemple, dans le partage des fonctionnalités) _escaped_fragment_ .

Je suis tout à fait sûr que tout ce que vous avez vu promouvoir réagir comme étant bon pour SEO a fait pour pouvoir rendre la page demandée sur le serveur, avant de l'envoyer au client. Donc, il sera indexé comme n'importe quelle autre page statique, en ce qui concerne les moteurs de recherche.

Le rendu du serveur est possible via ReactDOMServer.renderToString . Le visiteur recevra la page de balisage déjà rendue, que l'application React détectera une fois qu'elle aura été téléchargée et exécutée. Au lieu de remplacer le contenu lorsque ReactDOM.render est appelé, il ajoutera simplement les liaisons d'événements. Pour le reste de la visite, l'application React reprendra et d'autres pages seront rendues sur le client.

Si vous êtes intéressé à en apprendre davantage à ce sujet, je suggère de rechercher "Universal JavaScript" ou "Universal React" (anciennement connu sous le nom de "réaction isomorphe"), car cela devient le terme pour les applications JavaScript qui utilisent une base de code unique pour rendre Sur le serveur et le client.

Comme l'a dit l'autre intervenant, ce que vous cherchez, c'est une approche isomorphe. Cela permet à la page de venir du serveur avec le contenu rendu qui sera analysé par les moteurs de recherche. Comme l'a mentionné un autre commentateur, cela pourrait sembler être bloqué en utilisant node.js comme langue de votre côté serveur. Bien qu'il soit vrai que javascript soit exécuté sur le serveur est nécessaire pour que cela fonctionne, vous ne devez pas tout faire dans le nœud. Par exemple, cet article traite de la manière d'obtenir une page isomorphe utilisant Scala et réagit:

https://thebhwgroup.com/blog/isomorphic-web-design-react-scala

Cet article décrit également les avantages UX et SEO de cette sorte d'approche isomorphe.

Deux jolies exemples d'implémentations:

Essayez de visiter https://react-redux.herokuapp.com/ avec javascript activé et désactivé, et regardez le réseau dans les outils du développeur du navigateur pour voir la différence …

Il est également possible via ReactDOMServer.renderToStaticMarkup :

Similaire à renderToString , sauf que cela ne crée pas d'attributs DOM supplémentaires tels que data-react-id , que React utilise en interne. Ceci est utile si vous souhaitez utiliser React comme un générateur de page statique simple, car le retrait des attributs supplémentaires peut enregistrer beaucoup d'octets.

Je dois être en désaccord avec beaucoup de réponses ici car j'ai réussi à obtenir mon application React côté client fonctionnant avec googlebot sans aucune SSR.

Jetez un oeil à la réponse SO ici . Je n'ai réussi à le faire fonctionner que récemment, mais je peux confirmer qu'il n'y a pas encore de problèmes et googlebot peut réellement effectuer les appels API et indexer le contenu renvoyé.