Bonsoir ! Je suis en train de coder un petit site web. Cependant, un petit problème survient. J'ai décidé d'utiliser la méthode fetch() afin de ne charger qu'une partie de ma page (l'en-tête, le pied de page et le fond étant toujours les mêmes). J'ai donc ajouté des fonctions déclenchées par le clic des boutons du menu.

function displayServerPage() {
  document.querySelector("home").style.display = "none";
  fetch("./server.html")
    .then(response => {
      return response.text()
    })
    .then(data => {
      document.querySelector("server").innerHTML = data;
    });
}

function displayRegister() {
  fetch("./register.html")
    .then(response => {
      return response.text()
    })
    .then(data => {
      document.querySelector("register").innerHTML = data;
    });
}

Cela marche mais qu'une seule fois. En effet, j'ai l'impression que la méthode fetch() ne fonctionne qu'une fois (au premier clic) mais pas pour les suivantes.

Comment puis-je résoudre ce problème ?

Merci d'avance pour vos réponses

-
Edité par Sarah2627 14 octobre 2020 à 13:30:56

Salutations,

Pour ton document.querySelector il te faut un #home ou .home mais pas home tout court je pense.

et d'un point de vue général cela me semble une mauvaise en terme de SEO, pas certain que Google interprète bien le changement de page. On a inventé le SSR en React par exemple pour pallier à ça.
Si néanmoins tu restes sur cette solution pense bien à modifier tes Meta title et Meta description à chaque changement de page.

On a inventé le SSR en React

🤣

Mais effectivement la méthode ici est bizarre ; selon les technologies utilisées il y a certainement moyen de faire plus simple, performant et fonctionnel.

Bonjour,

Merci beaucoup pour vos réponses ! En effet, j'ai rapidement compris que cette solution n'était pas la plus adaptée. J'ai donc basculé sur un système PHP avec des includes ne souhaitant pas utiliser de framework comme React pour ce projet