Published on

SSR (server side rendering) avec Next.js

Comme évoqué dans l'introduction, il est indispensable pour certains sites d'être indexable par les moteurs de recherche. La question de l'indexation est relativement simple à comprendre, mais il faut être vigilant sur la structure du projet et de toujours avoir en tête des éléments qu'il faut impérativement avoir au rendu SSR et ceux qui peuvent être délivrés en asynchrone après le chargement de la page en elle même.

Qu'est-ce que l'indexation

Pour mieux comprendre la problématique de l'indexation, il faut comprendre comment fonctionne un moteur de recherche comme Google, qui aujourd'hui représente une très grande partie du trafic naturel qu'un site peut avoir. Sans cette indexation dans le moteur vous ne serez jamais visible dans les résultats de recherche, une source très souvent sous-estimée, car elle peut rapporter des visiteurs, parfois en très grande quantité sans rien devoir à Google.

Alors comment Google fonctionne pour indexer des nouvelles pages ? La réponse est assez simple, le moteur va parcourir l'ensemble des pages de votre site et juger ou non le fait de l'inclure dans les résultats de recherche pour une requête donnée. Il existe une multitude de critères, qui constituent dans son ensemble la complexité de l'algorithme de classement dans les fameux résultats de recherche. Il faut distinguer les optimisations on-site et off-site.

Optimisations on-site

C'est ce qui va nous intéresser le plus, et surtout la grande force de Next.js pour optimiser toute la partie on-site d'un site. Comme son nom l'indique, cette partie vise à optimiser tout ce que l'on peut sur le site, que ce soit de la technique, au contenu, mais également le maillage interne de nos pages afin de permettre au moteur de recherche de bien comprendre les sujets sur lesquels nous voulons ressortir dans les résultats de recherche.

Les balises title et meta

Entre les balises <head> il est possible d'ajouter une balise <title> qui va indiquer le titre de notre page, qui est aujourd'hui un très gros argument aux yeux de Google, chaque page doit avoir un titre différent et doit correspondre au contenu de la page. Elle doit être visible et correctement remplie au téléchargement de la page et par conséquent dans le HTML.

Il est également possible d'ajouter des balises <meta> pour la description ou les keywords, qui toujours doivent correspondent au contenu de la page en question.

Le contenu textuel et image

C'est clairement la base d'un site internet, d'avoir du contenu unique et des images ou vidéos pour illustrer les propos. Ce contenu, tout comme les balises doivent être présentes au moment du chargement de la page. Il n'est pas question de les remplir après que la page soit chargée.

Optimisations off-site

Cette partie est fortement liée à la réputation de votre site, pour cela il est important d'avoir d'autres sites qui créer des liens vers votre site internet pour gagner en réputation aux yeux de Google. C'est également un très gros poids dans l'algorithme de recherche aujourd'hui, mais nous ne verrons pas ce point, car il est plutôt relié au marketing qu'à la technique, cela étant dit il est toujours important de le savoir.

Ce que le moteur veut

Revenons à notre question de SSR, l'idée est d'avant tout de respecter au mieux les consignes des moteurs de recherche afin de mettre l'ensemble des chances de notre côté pour ne pas avoir de problème de référencement. Pour cela comme indiqué ci-dessus il est important d'avoir un maximum d'éléments chargés au moment du chargement de votre page. Pour le vérifier, il vous suffit d'ouvrir le code source de la page (pas d'inspecter la page, mais bien d'ouvrir le code source).

Si vous examiner bien votre page vous verrez très rapidement la différence entre une page type SPA et une page SSR, dans la SPA vous n'allez retrouver que quelques lignes de code et des balises title qui sont toutes les mêmes. Au contraire dans une application SSR vous allez retrouver l'ensemble du contenu de la page dans le code source. Cette petite différence à un très gros impacte sur la visibilité de votre site.

Fonctionnement de Next.js pour palier au SSR

Next.js est basé sur React et par conséquent conserve le cycle de vie existant, pour répondre à la problématique du SSR il est possible de résoudre de plusieurs façons, ici nous allons partir du principe où nous souhaitons récupérer des données dynamiquement depuis un webservice. Il faudra donc aller chercher nos données avant d'indiquer à Next de rendre la page. Il va donc attendre que notre travail de fond soit effectué pour rendre le HTML. Pour cela il faut utiliser la fonction getServerSideProps qui est dédiée à cet usage. Vous allez chercher les données avec la solution de votre choix comme Fetch ou Axios et les retourner sous forme de props dans votre composant.

export const getServerSideProps = async (context) => {
  const reponse = fetch(`${process.env.API_HOST}/product/1`)
  const product = await response.json()

  return {
    props: {
      product,
    },
  }
}

Dans cet exemple je vais récupérer mon produit 1 via mon API est retourner ce même objet dans mon composant React ci-dessous, pouvoir récupérer mon produit sous forme d'une props et l'afficher sur ma page. Il n'y a pas de problème de SSR car au moment où mon composant va être initialisé j'aurais bien mon produit qui sera disponible directement dans le render de mon composant.

class Index extends React.Component {
    const { title, description, price } = this.product;

    return (
        <Layout>
            <h1>{title}</h1>
            <div class="price">{price}</div>
            <div class="desc">{description}</div>
        </Layout>
    )
}