Manuel der Entwicklerschreck: SPAs-Routes mit PHP?

Hallo,

Beschäftige mich derzeit wieder intensiver mit dem Thema SPAs.

https://dimension.matnard.now.sh/ veranschaulicht in etwa das Prinzip, hinter dem ich her bin. (Hierbei handelt es sich zwar um ein Showcase Projekt für das Framework Frontity, aber selbiges sollte doch auch mit nicht allzu großen Aufwand mit reinem Javscript / PHP ohne massive Bibliotheken bzw. Frameworks umsetzbar sein...?).

Sieht man sich das Beispiel an, so fällt auf, dass die Pfade /Intro, /About, /Work und /Contact aufgerufen werden können, gleichzeitig sämtliche Inhalte aber vorgeladen werden und dadurch kein Page Refresh stattfindet. Die Navigationsverläufe werden in der History dennoch gespeichert und können im Browser mit "zurück" und "vorwärts" wiederhergestellt werden.

Frontendseitig sollte dabei die Umsetzung mit location.pathname, sowie der History API (history.pushState, etc.) nicht allzu große Schwierigkeiten bereiten, wie sieht das am Backend mit PHP aus? Meines Erachtens benötige ich hierfür bloß für jeden Pfad ein Redirect auf [../]index.php, wo ich dann frontendseitig die Eingabe der URLs sowie die Klicks auf Navigationspunkte weiterbehandle. Liege ich mit dieser Annahme richtig?

Kopfzerbrechen bereitet mir dabei auf die SEO. Sind Bots mittlerweile schon soweit, dass sie Javascript-generierte Inhalte berücksichtigen?

Wie ihr seht, befinde ich mich zu Beginn eines neuen Projekts. Würde mich sehr freuen, wenn zu den beiden in bold verfassten Fragestellungen irgendwer weiterführende hilfreiche Ressourcen bereitstellen könnte, damit ich mich entsprechend einlesen könnte (akzeptiere natürlich auch gerne direkte Antworten hier im Forum).

Dank euch im Voraus!

Manuel.

  1. Tach!

    Sieht man sich das Beispiel an, so fällt auf, dass die Pfade /Intro, /About, /Work und /Contact aufgerufen werden können, gleichzeitig sämtliche Inhalte aber vorgeladen werden und dadurch kein Page Refresh stattfindet. Die Navigationsverläufe werden in der History dennoch gespeichert und können im Browser mit "zurück" und "vorwärts" wiederhergestellt werden.

    Frontendseitig sollte dabei die Umsetzung mit location.pathname, sowie der History API (history.pushState, etc.) nicht allzu große Schwierigkeiten bereiten, wie sieht das am Backend mit PHP aus?

    Im Frontend wird ein Router dafür sorgen, dass je nach URL die gewünschten Inhalte ins DOM eingefügt werden.

    Meines Erachtens benötige ich hierfür bloß für jeden Pfad ein Redirect auf [../]index.php, wo ich dann frontendseitig die Eingabe der URLs sowie die Klicks auf Navigationspunkte weiterbehandle.

    Alles, was keine konkrete Datei oder Verzeichnis auf dem Server ist, wird auf die index.php umbeschrieben. Oder allgemeiner gesagt: auf das, was dem Browser die benötigten Ressourcen liefert, um die SPA grundsätzlich zu starten. Den Rest übernimmt der frontendseitige Router.

    Kopfzerbrechen bereitet mir dabei auf die SEO. Sind Bots mittlerweile schon soweit, dass sie Javascript-generierte Inhalte berücksichtigen?

    Wenn die Inhalte derart statisch sind, dass sie sinnvoll von der Suchmaschine indiziert werden können, braucht man keine SPA.

    SPAs spielen eher dann ihren Vorteil aus, wenn die Inhalte aufgrund der Anforderungen des Anwendungsfalls dynamisch sind. Eine statische Abbildung in einer Suchmaschine ist dafür nicht mehr sinnvoll, und damit auch keine SEO-Maßnahmen. Für die Suchmaschinen kann man aber meistens einen statischen Teil erstellen, der zum Beispiel das Projekt vorstellt. Und der kann dann auch sinnvoll als Kopie im Index einer Suchmaschine landen.

    dedlfix.