Forum : React.js est-il SEO friendly ?

Auteur

Je reviens sur ma question. Il faudrait utiliser en plus la librairie Next JS qui fait du Server Side Rendering. C'est encore trop flou pour moi.

popotte

Hello!

Alors ReactJS c'est une librairie, NextJS c'est un framework basé sur ReactJS
Tu ne peux pas installer NextJS dans React, en gros tu installe NextJS, et NextJS va utiliser ReactJS (pas besoin de l'installer ce sera déjà installé tout seul :p) yarn create next-app ou yarn create next-app --typescript ou alors avec npx si tu utilises npm npx create-next-app@latest --typescript pour dev en typescript pour faire du sass tu as juste à installer le module sass yarn add sass et c'est tout, pas besoin de compilateur comme Gulp ou autre, NextJs gère ça tout seul et dans le js t'aura juste a importer le fichier dans une variable ^^ tu n'as pas beoins d'utiliser ReactRouter non plus, Next se base sur les emplacements de fichiers et dossier pour déduire la route, par exemple tu as un fichier about/index.js, pour y acceder tu fais http://tonsite/about, si tu as un fichier about/example.js, pour y acceder tu fais http://tonsite/about/example, et tu peux mettre des variables, par exemple un fichier member/[name].js pour y acceder ce sera http://tonsite/member/toto (il va rechercher le membre qui a le name toto)

Et tu as plein d'autres trucs, regardes la doc :p

https://nextjs.org/docs/getting-started

Pour ce qui est de Laravel, alors ça devient vite usine a gaz si c'est mal utilisé, en gros il faut utiliser Laravel pour le back seulement et tu peux utiliser react en intallant un preset larave/ui pour la personnalisation

ReactJS c'est un elibrairie pour le front, pour le back tu peux utiliser n'importe quel framework, projet Laravel et tu installes laravel/ui pour ajouter React, NextJS et pas besoin d'installer React car ce sera déjà fait, Ruby on Rails

Pour le SEO maintenant, dans les framework au dossier public en général, tu as un fichier robot.txt, tu peux parametrer à partir de la, et ensuite y'a les bonnes pratiques à prendre en compte :p

HSBU

Auteur

Hello !

merci de ta réponse.

Dois-je en déduire que je dois tout de même me faire la main à React JS avant Next JS ou bien passer à l'apprentissage de Next JS directement ?

Concernant le SEO, justement Next.JS le gère bien en générant des pages statiques.

Merci.

popotte

Mmmh tu peux apprendre directement NextJS, d'ailleurs dans la doc de React ils te redirigent vers NextJS si tu fait pas un site statique ;)

Et en apprennant Next tu apprendra automatiquement le ReactJS, sauf les phases gérée par Next, comme le routing par exemple qui est déjà géré par next :p

Orivoir21

Bonjour, le problème avec les pages qui sont entièrement construites avec Javascript, c'est que pour le référencement les bots on besoin de comprendre la structure du document HTML et que du coup ton document HTML il va ressembler à ça:

<!DOCTYPE html>

<html>

 <head>
    <meta charset="utf-8">
  </head>

  <body>
      <!-- point d'entrée de l'application React.js -->
      <div id="root"></div>

      <!-- charge le bundle React.js -->
      <script src="/bundle.js"></script>
  </body>

</html>

Donc enfaite le document distribué au client et vide car il et construit par Javascript (ce n'est pas un problème relatif à React.js toutes les applications mono-page on ce problème-là).
Pour le référencement ce n'est pas top (parce que du coup il y à pas grand chose à référencer).
Il existe des solutions de contournement comme le fichier manifest.json
qui et un fichier JSON qui va décrire globlalement l'application via des meta-données et être chargé par la page via un tag link (un peu comme le css)

<link rel="manifest" href="/manifest.json">

Un article (non-officiel) Progressive Web App SEO résume ce problème-là est montre comment le fichier manifest.json peut aidé à le régler.

React.js est-il SEO friendly ?

4 réponses